Vuejs 用$emit与$on来进行兄弟组件之间的数据传输通信
最近在学习vue组件鸡组件之前通信问题，正好看到，以此来留作笔记。
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8"/>
<title>Vue2-单一事件管理组件通信</title>
<scriptsrc="vue.js"></script>
<scripttype="text/javascript">
//准备一个空的实例对象
varEvent=newVue();
//组件A
varA={
template:`
<div>
<span>我是A组件的数据->{{a}}</span>
<inputtype="button"value="把A数据传给C"@click="send">
</div>
`,
methods:{
send(){
Event.$emit("a-msg",this.a);
}
},
data(){
return{
a:"我是a组件中数据"
}
}
};
//组件B
varB={
template:`
<div>
<span>我是B组件的数据->{{a}}</span>
<inputtype="button"value="把B数据传给C"@click="send">
</div>
`,
methods:{
send(){
Event.$emit("b-msg",this.a);
}
},
data(){
return{
a:"我是b组件中数据"
}
}
};
//组件C
varC={
template:`
<div>
<h3>我是C组件</h3>
<span>接收过来A的数据为:{{a}}</span>
<br>
<span>接收过来B的数据为:{{b}}</span>
</div>
`,
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
}
});
};
</script>
</head>
<body>
<divid="box">
<dom-a></dom-a>
<dom-b></dom-b>
<dom-c></dom-c>
</div>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。