Vue同級組件的通信

Vue父子級組件通信可以用自定義事件，通過在父組件定義一個事件，然後在子組件中$emit("事件名",....參數)，即可觸發父組件定義的事件，如果是同級組件就不能這樣直接通信，因爲脫離了事件的作用域了，但平時開發中確實會有這樣的需求，可以通過一箇中間組件來實現消息傳遞，中間組件 可以理解成 同級組件的通信橋樑，但可以通過可以訪問 中間組件來獲取數據。

這個中間組件可以是新的Vue實例、根實例，必須要相互通信的同級組件都能訪問到。

中間組件

RootVue=new Vue({
        el:"#app",
        data:{
            msgone:"",
            msgtwo:""
        }
    });

RootVue.$on("sendone",function(data){
        this.msgone=data;
    });

    RootVue.$on("sendtwo",function(data){
        this.msgtwo=data;
    });

組件1

Vue.component("comone",{
            props:["recvmsgone"],
            data:function(){
                return {
                    msg:"",
                };
            },
            methods:{
                send:function(){
                    RootVue.$emit("sendtwo",this.msg);
                }
            },
            template:"<div><label>組件1</label><input type='text' v-model='msg'/><button v-on:click='send'>發消息給組件2</button><span>收到的消息:{{recvmsgone}}</span></div>"
        });

組件2

Vue.component("comtwo",{
            props:["recvmsgtwo"],
            data:function(){
                return {
                    msg:"",
                    recvmsg:""
                };
            },
            methods:{
                send:function(){
                    RootVue.$emit("sendone",this.msg);
                }
            },

            template:"<div><label>組件2</label><input type='text' v-model='msg'/><button v-on:click='send'>發消息給組件1</button><span>收到的消息:{{recvmsgtwo}}</span></div>"
        });

 

實現原理就是，通過在一箇中間組件定義事件，在同級組件中$emit發送信號，中間組件執行事件函數並保存數據，同級組件各自讀取中間組件的屬性來完成交互。