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发送信号，中间组件执行事件函数并保存数据，同级组件各自读取中间组件的属性来完成交互。