非父子组件通讯
// 定义一个空对象，用于触发和监听实例
var Bus = new Vue();
var A = {
template: "#a",
data(){
return {
name:'aaa'
}
},
methods: {
send(){
Bus.$emit('data-a',this.name);
}
}
}
var B = {
template: "#b",
data(){
return {
age:33
}
},
methods:{
send(){
Bus.$emit('data-b',this.age);
}
}
}
var C = {
template:'#c',
data(){
return{
name:'',
age:''
}
},
mounted() {
// 这种写法娶不到值
// Bus.$on('data-a',function(name){
// this.name = name;
// });
// 箭头函数this总是指向函数定义生效时所在的对象
// 注意：箭头函数内部不会产生新的this,即就是当前实例
// 回调函数内部this为上面的空vue实例对象
Bus.$on('data-a',name \=>{
this.name = name;
});
Bus.$on('data-b',age \=>{
this.age = age;
});
}
}
var vm = null;
window.onload = function(){
vm = new Vue({
el:'#my',
data: {
},
components:{ //局部组件
'my-a':A,
'my-b':B,
'my-c':C
}
});
}
组件a:{{name}}
数据发给C
组件b:{{age}}
数据发送给C
组件c:{{name}}{{age}}
