有兩個元件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>

這樣就可以完成元件之間的通訊啦