vue组件之非父子组件通信

关键词：通信

有时候非父子关系的组件也需要通信。在简单的场景下，使用一个空的 Vue 实例作为中央事件总线：

   var bus = new Vue()

   // 触发组件 A 中的事件
   bus.$emit('id-selected', 1);

   // 在组件 B 创建的钩子中监听事件
   bus.$on('id-selected', function (id) {
    // ...
   })

实例

    <div id="box">
        <com-a></com-a>
        <com-b></com-b>
        <com-c></com-c>
    </div>

  var Event = new Vue();   // 空组件
        var A = {
          template:`
          <div>
            <span>我是A组件</span>->{{a}}
            <input type="button" value="把A数据给C" @click="send">
          </div>
          `,
          methods:{
             send(){
                Event.$emit('a-msg',this.a);   // 触发组件 A 中的事件
             }
          },
         data:function(){
         return {
             a:'我是a数据'
         }
       }
  }


       var B={
        template:`
            <div>
                <span>我是B组件</span>->{{a}}
                <input type="button" value="把B数据给C" @click="send">
            </div>
        `,
        methods:{
           send(){
             Event.$emit('b-msg',this.a);    // 触发组件B中的事件
            }
          },
        data:function(){
            return {
                a:'我是b数据'
            }
        }
     }

    var C={
      template:`
        <div>
            <h3>我是C组件</h3>
            <span>接收过来的A的数据为: {{a}}</span>
            <br />
            <span>接收过来的B的数据为: {{b}}</span>
        </div>
      `,
      data: function(){
        return {
            a:'',
            b:''
        }
      },
      mounted:function(){
        //var _this=this;
        Event.$on('a-msg',function(a){    // 在组件C 创建的钩子中监听事件
            this.a=a;
        }.bind(this));

        Event.$on('b-msg',function(a){    // 在组件C 创建的钩子中监听事件
            this.b=a;
        }.bind(this));        
    }
  };

window.onload=function(){
    new Vue({
        el:'#box',
        components:{
            'com-a':A,
            'com-b':B,
            'com-c':C
        }
    });
};