事件谁派发谁监听,这里事件都交给$bus派发和监听,在派发事件时调用回调函数
export default class Bus{
constructor(){
this.callbacks = {}
}
$on(name, fn){
this.callbacks[name] = this.callbacks[name] || []
this.callbacks[name].push(fn)
}
$emit(name, args){
if(this.callbacks[name]){
this.callbacks[name].forEach(cb =>{
cb(args)
})
}
}
}
main.js 文件
import Bus from "./utils/bus"
Vue.prototype.$bus = new Bus()
跨越多层级的组件中使用通信
this.$bus.$emit("cat", "xiangcai")
this.$bus.$on("cat", (params)=>{
console.log(params)
})