vue组件通讯

父子通讯

父组件向子组件通讯(单向数据流传递,子组件不应该改变父组件里面数据的值),父组件代码如下


父组件在调用子组件的标签上声明自定义属性,该属性的值为父组件要向子组件通讯的内容,

props:["speaktoson"]

子组件通过props属性声明上述步骤中的自定义属性为自组件的数据(变量)

子父通讯

子组件通过$emit('eventName','toDeliverData')发送一个自定义事件

this.$emit("speaktofather",{data:this.sonSay});

父组件通过v-on:eventName,监听子组件发送的自定义事件,从事件对象里面剥离出子组件传递的值


兄弟通讯

声明一个中央集线器var busHub = new Vue();

var busHub =  new Vue();

其中一个子组件利用busHub的$emit方法发送一个自定义事件,方法同上

busHub.$emit("speaktobrother",{data:"老铁"});

你可能感兴趣的:(vue组件通讯)