手写事件总线 eventBus

了解

通常在 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 实例