vue兄弟组件之间通信

有两个组件A和B，怎么实现A和B之间的通信呢？

需要借助于一个公共的Vue的实例对象，不同的组件可以通过该对象完成事件的绑定和触发。

var bus = new Vue();

bus.$emit();
bus.$on();

定义A组件：

Vue.component("com-a",{
    template:`
        <div>
            <h1>我是A组件</h1>
            <input type="text" v-model="v"/>
            <button @click="sendTo">Click Me</button>
        </div>
    `,
    data:function(){
        return {
            v:""
        }
    },
    
    watch:{
        v:function(n){
            bus.$emit("msgTo",n)
        }
    },
    methods:{
        sendTo:function(){
            var me = this;
            bus.$emit("msgTo",me.v);
            me.v= "";
        }
    }
})

定义组件B：

Vue.component("com-b",{
    data:function(){
        return{
            name:[]
        }
    },
    template:`
        <div>
            <h1>我是B组件</h1>
            <p v-for="it,index in name">{{it}}</p>
        </div>
    `,
    mounted:function(){
        var me = this;
        bus.$on("msgTo",function(msg){
                me.name.push(msg);
        })
    }
})

使用：

<com-a></com-a>
<hr>
<com-b></com-b>

这样就可以完成组件之间的通信啦