vue组件通讯

父子通讯

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

<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:"老铁"});
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容