Vue组件之间的通信方式

组件间通信的方案

整理vue中8种常规的通信方案

1. 通过 props 传递

2. 通过 $emit 触发自定义事件

3. 使用 ref

4. EventBus

5. parent 或root

6. attrs 与 listeners

7. Provide 与 Inject

8. Vuex

props传递数据

• 适用场景：父组件传递数据给子组件

• 子组件设置props属性，定义接收父组件传递过来的参数

• 父组件在使用子组件标签中通过字面量来传递值

Children.vue
props:{  
    // 字符串形式  
 name:String // 接收的类型参数  
    // 对象形式  
    age:{    
        type:Number, // 接收的类型为数值  
        defaule:18,  // 默认值为18  
       require:true // age属性必须传递  
    }  
}  
​

Father.vue组件

<Children name="jack" age=18 />  
​

$emit 触发自定义事件

• 适用场景：子组件传递数据给父组件

• 子组件通过$emit触发自定义事件，$emit第二个参数为传递的数值

• 父组件绑定监听器获取到子组件传递过来的参数

Chilfen.vue
this.$emit('add', good)  
​
Father.vue
<Children @add="cartAdd($event)" />  
​

小结

• 父子关系的组件数据传递选择 props 与 $emit进行传递，也可选择ref

• 兄弟关系的组件数据传递可选择$bus，其次可以选择$parent进行传递

• 祖先与后代组件数据传递可选择attrs与listeners或者 Provide与 Inject

• 复杂关系的组件数据传递可以通过vuex存放共享的变量