当多个组件之间进行通讯时,再使用$children 、$ref就会很麻烦,这时候使用bus会降低复杂度
bus.js
const install = function(Vue){
let bus = new Vue({
methods:{
emit(event,...args){
this.$emit(event,...args)
},
on(event,callback){
this.$on(event,callback)
},
off(event,callback){
this.$off(event,callback)
}
}
})
Vue.prototype.$bus = bus
}
export default install
main.js
import bus from './components/bus'
Vue.use(bus)
//b组件中发送消息
this.$bus.emit('message',data)
// 可以在 a组件中 中 接收消息
this.$bus.off('message',(data) => {
console.log('off event')
});
//停止消息
this.$bus.off('message',() => {
console.log('off message')
})
网友评论