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