组件间传值

逸男2022年12月12日
  • Vue
  • Vue2
大约 1 分钟

组件间传值

父传子 - 属性绑定

1.在父组件子组件标签属性中通过属性绑定传值

:aaa="data" // 表示把父组件的data数据传递过去 取名aaa

2.在子组件 props 属性 中接受

props: ['aaa'] // 使用方法和data数据一致

子传父 - 事件触发

1.在子组件中定义触发自定义事件

this.$rmit('自定义事件名', 参数)

2.在父组件子组件标签属性中设置自定义事件 @自定义事件名=" 父组件处理函数 "

@自定义事件名 = " 父组件处理函数($event) " // $event为1的参数

// 在2中可以直接书写$event在属性中接受1的参数↓↓↓
@自定义事件名 = "this.data = $event" // 简单的逻辑可以直接在属性标签中处理

3.在父组件中定义处理函数并接受参数

父组件处理函数(参数){处理函数}

双向绑定传值

当一个参数既要传递又要修改时 可以使用 v-model="" 绑定

1.在父组件中子组件标签属性中绑定

v-model="data"
// 相当于如下命令 绑定属性和事件名可以在子组件model属性中自定义
// :value="data"
// @input="data= $event"

2.如何自定义默认属性名和事件名

// 在子组件model中 自定义v-model默认绑定的属性绑定名和事件
 model: {
    prop: "data", // 属性绑定 从value(默认值)data
    event: "updata-event" // 事件 从input(默认值)改为updata-event
  },

3.在子组件中使用 具体看 **父传子 - 属性绑定 ** 子传父 - 事件触发

其他组件传值

​ vuex

上次编辑于:
贡献者: yinan