最近在学习vue组件鸡组件之前通信问题，正好看到，以此来留作笔记。
代码如下
<script src="vue.js"></script>
<script type="text/javascript">
//准备一个空的实例对象
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
}
});
};
</script>
【vue.js】Vuejs 用$emit与$on来进行兄弟组件之间的数据传输通信
http://m.bbyears.com/jiaocheng/126598.html
推荐访问:vuejs安装 vuejs下载 vuejs官网