手撕eventBus

Mr.Song2020年8月7日
小于 1 分钟

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);
评论
Powered by Waline v2.6.2