vue项目中eventBus总线机制

Vue项目中使用EventBus实现组件间通信

最新推荐文章于 2025-10-06 05:52:17 发布

原创最新推荐文章于 2025-10-06 05:52:17 发布 · 510 阅读

1 ·

CC 4.0 BY-SA版权

Vue 专栏收录该内容

21 篇文章

订阅专栏

本文介绍了在Vue项目中如何利用EventBus进行组件间的通信。首先，通过创建eventBus.js文件并封装事件监听、触发、取消和清除功能。然后，将eventBus挂载到Vue原型或Window上。在实际使用中，可以方便地进行事件监听和触发，实现参数传递。在不再需要事件时，推荐使用off()方法取消监听。这种通信方式在某些特殊场景下非常实用。

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

使用

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