父子通讯
父组件向子组件通讯(单向数据流传递,子组件不应该改变父组件里面数据的值),父组件代码如下
<zhead :speaktoson="dadSay"></zhead>
父组件在调用子组件的标签上声明自定义属性,该属性的值为父组件要向子组件通讯的内容,
props:["speaktoson"]
子组件通过props属性声明上述步骤中的自定义属性为自组件的数据(变量)
子父通讯
子组件通过$emit('eventName','toDeliverData')发送一个自定义事件
this.$emit("speaktofather",{data:this.sonSay});
父组件通过v-on:eventName,监听子组件发送的自定义事件,从事件对象里面剥离出子组件传递的值
<localcom @speaktofather="getSonMsg"></localcom>
兄弟通讯
声明一个中央集线器var busHub = new Vue();
var busHub = new Vue();
其中一个子组件利用busHub的$emit方法发送一个自定义事件,方法同上
busHub.$emit("speaktobrother",{data:"老铁"});
网友评论