非父子組件通訊
// 定義一個空對象，用于觸發和監聽實例
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}}
