通過單獨(dú)的事件中心管理組件間的通信
將在各處使用該事件中心,組件通過它來(lái)通信
1、先設(shè)置Bus
var eventHub = new Vue()
然后在組件中内斯，可以使用 on, $off 分別來(lái)分發(fā)蕴潦、監(jiān)聽、取消監(jiān)聽事件
2俘闯、發(fā)送事件的組件
Vue.component('component-a',{
template:'<div>組件A：<button @click="sendDataFromA">向組件B發(fā)送組件A的數(shù)據(jù)</button></div>',
data() { return { data1:'組件A的數(shù)據(jù)' } },
methods: {
sendDataFromA() {
eventHub.$emit('sendDataFromA',this.data1)
}
}
})
3潭苞、組件內(nèi)監(jiān)聽事件
Vue.component(' component-b',{
template:'<div>組件B:<p>從組件A接收的字符串參數(shù) {{msg}}</p></div>',
data(){
return {msg:'默認(rèn)值'}
},
mounted() {
var self = this
eventHub.$on('sendDataFromA',function(data){ self.msg = data })
}
})
