好资源导航 » 文章资讯 » Vue2单一事件管理组件通信

Vue2单一事件管理组件通信

2024-02-24 02:30:03 42

本文为大家分享了vue$emit和$on组件通信，供大家参考，具体内容如下





Vue2-单一事件管理组件通信



//准备一个空的实例对象
varEvent=newVue();

//组件A
varA={
template:`

我是A组件的数据->{{a}}


`,
methods:{
send(){
Event.$emit("a-msg",this.a);
}
},
data(){
return{
a:"我是a组件中数据"
}
}
};
//组件B
varB={
template:`

我是B组件的数据->{{a}}


`,
methods:{
send(){
Event.$emit("b-msg",this.a);
}
},
data(){
return{
a:"我是b组件中数据"
}
}
};
//组件C
varC={
template:`

我是C组件
接收过来A的数据为:{{a}}


接收过来B的数据为:{{b}}

`,
mounted(){
//接收A组件的数据
Event.$on("a-msg",function(a){
this.a=a;
}.bind(this));

//接收B组件的数据
Event.$on("b-msg",function(a){
this.b=a;
}.bind(this));
},
data(){
return{
a:"",
b:""
}
}
};
window.onload=function(){
newVue({
el:"#box",
components:{
"dom-a":A,
"dom-b":B,
"dom-c":C
}
});
};

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
514930285
czq8825@qq.com

Vue2单一事件管理组件通信

我是C组件

热门推荐

随机推荐