了解
通常在 vue 组件中实现组件之间的传参访问,相比应该有接触过事件总线 $bus 或者叫 eventBus , 一般我们是在 main.js 中初始化一个 vue 实例,并挂载原型上。
一般是这么写
// main
Vue.prototype.eventBus = new Vue()
// comp1
this.eventBus.$emit('handle','value')
// comp2
this.eventBus.$on('handle', callback)
手撕
使用纯 js 实现
class EventBus {
constructor() {
this.events = {}
}
on(eventName, cb) {
if(cb) this.events[eventName] = cb
else this.events[eventName] = null
}
emit(eventName, arg) {
if(this.events[eventName]) {
return this.events[eventName](arg)
}
}
}
let bus = new EventBus()
bus.on('event', arg => console.log('event', arg))
bus.emit('event', 123) // event 123
bus.on('handle', arg => console.log('handle', arg))
bus.emit('handle', 'hello world') // handle hello world
console.log(bus);
这是打印的 bus 实例