vue项目中eventBus总线机制

1. 使用场景
   vue项目中，某些特殊情况下，我们需要不相关的组件之间通信，这种情况我们可以通过eventBus来解决问题，通过事件的监听和触发来实现通信和参数传递
2. 封装
   新建eventBus.js文件

let events = {}
export default {
  //事件监听
  on(eventName,handler){
    if (typeof handler === 'function') {
      if (!events[eventName]) {
        events[eventName] = new Set()
      }
      events[eventName].add(handler)
    }
  },
  //事件触发
  emit(eventName,payload){
     if (!events[eventName]) {
        return console.warn(`已触发${eventName}事件，但没有事件监听者，未发生任何改变`)
      }
      for(let func of events[eventName].values()) {
         func(payload)
      }
  },
  //事件取消
  off(eventName,handler){
    if (!handler) {
      return console.warn('取消事件监听必须传入已监听的事件函数')
    }
    events[eventName].delete(handler)
  },
  //所有事件清空
  clear(){
    events = {}
  }
}

挂载到原型或Windows上

import eventBus  from './eventBus.js'
//两种方式二选一

//挂载正在原型上
Vue.prototype.$eventBus = eventBus  
//挂载正在windows上
windows.$eventBus = eventBus  

3. 使用

//以挂载在Windows上为例
//监听事件
$eventBus.on('testEvent', testFunc)
testFunc(data){
  console.log(data)
  //具体操作...
}
//触发事件
$eventBus.emit('testEvent', {a:1,b:2})

在eventBus中定义的事件如不再使用，最好使用off()方法取消该事件