vue组件通讯

一、小结

• 父子关系的组件数据传递选择 props 与 emit进行传递，也可选择ref
• 兄弟关系的组件数据传递可选择bus，其次可以选择parent进行传递
• 祖先与后代组件数据传递可选择attrs与listeners或者 Provide与 Inject
• 复杂关系的组件数据传递可以通过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)" />  

ref

• 父组件在使用子组件的时候设置ref
• 父组件通过设置子组件ref来获取数据

父组件

<Children ref="foo" />  
  
this.$refs.foo  // 获取子组件实例，通过子组件实例我们就能拿到对应的数据  

EventBus

• 使用场景：兄弟组件传值
• 创建一个中央事件总线EventBus
• 兄弟组件通过$emit触发自定义事件，$emit第二个参数为传递的数值
• 另一个兄弟组件通过$on监听自定义事件

Bus.js
import Vue from 'vue'
const eventBus = new Vue()

export default eventBus
Children1.vue
import bus from "@/components/eventBus";

data() {
    return {
      searchValue: "",
    };
  },
methods: {
    onSearch() {
      bus.$emit('searchValue',this.searchValue)
      
    },
Children2.vue
import bus from "@/components/eventBus";

methods: {
    getSearchValue() {
      bus.$on('searchValue',(message) =>{
          console.log("组件1传过来的值：",message)
    })
    }
  },