EventBus 用来实现任意组件的通信,其实实现起来并不算太难,封装一个 class 类即可实现
export default class EventBus {
constructor() {
this.events = {}
}
// this.events = { a: [ callback1, callback2 ], b: callback }
$on(eventName, callback) {
// 不存在这个属性就创建新数组 a: []
this.events[eventName] = this.events[eventName] || []
this.events[eventName].push(callback)
}
$emit(eventName, ...args) {
if (this.events[eventName]) {
this.events[eventName].forEach(callback => {
callback(...args)
})
}
}
}
// 反推
// 需要实现
const myEventBus = new EventBus()
// 订阅(可以对同一个事件名有多个订阅)
myEventBus.$on("a", () => {
console.log("a1")
})
myEventBus.$on("a", () => {
console.log("a2")
})
// 发布
myEventBus.$emit("b") //第二个可以传参数,被$on的回调所接受