美文网首页
vue组件通讯

vue组件通讯

作者: Hachiman | 来源:发表于2018-06-15 09:34 被阅读0次

    父子通讯

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

    <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:"老铁"});
    

    相关文章

      网友评论

          本文标题:vue组件通讯

          本文链接:https://www.haomeiwen.com/subject/ophueftx.html