Vue组件通信方式

Vue组件通信方式

（一）父组件向子组件传值

1、在父组件的子组件上声明一个自定义的属性名用这个自定义属性绑定(v-bind)父组件的值；
2、在子组件内的props属性中 接受父组件传来的自定义属性名；
notice:props可以是数组或对象。当props为对象时，可以通过type、default、required、validator等配置来设置属性的类型、默认值、是否必传和校验规则。
图解：

(二) 子组件向父组件传值

1、在子组件内定义一个方法并触发 this.$emit('自定义事件名',事件数据)；
2、在父组件的子组件上，为该自定义的时间提供处理函数；
3、处理函数的参数是从子组件传来的。

(三) 兄弟组件之间传值

在这里主要用事件车进行传值
“Bus”: 通信总线，可用于多个平级的兄弟间传递数据

    var bus = new Vue();
    1、在全局定义一个vue的示例bus 并导出，在子组件里面引入；
    2、发送数据的组件 bus.$emit("自定义事件",发送的数据)
    3、接受数据组件 bus.$on("自定义事件",(arg)=>{
        //arg 就是接受到的数据
    })

(四) 爷爷向孙子传值

爷爷组件：
    provide(){
        return { yy:this.boxMsg} 
        //yy 是键名 值为需要发送的数据
    }
孙子组件:
    inject:['yy'] //yy是爷爷组件的键名

整理不易，望君珍惜