vue实现eventbus

Vue 2 中实现 EventBus

在 Vue 2 中，可以通过创建一个新的 Vue 实例作为事件总线来实现组件间的通信。这种方式适用于非父子组件或跨层级组件通信。

创建一个单独的 event-bus.js 文件：

import Vue from 'vue'
export const EventBus = new Vue()

在组件中使用：

// 发送事件
import { EventBus } from './event-bus.js'
EventBus.$emit('event-name', payload)

// 接收事件
import { EventBus } from './event-bus.js'
EventBus.$on('event-name', payload => {
  console.log(payload)
})

// 移除监听
EventBus.$off('event-name')

Vue 3 中实现 EventBus

Vue 3 移除了 $on、$off 等方法，可以使用第三方库如 mitt 来实现类似功能。

安装 mitt：

npm install mitt

创建事件总线：

import mitt from 'mitt'
export const emitter = mitt()

在组件中使用：

// 发送事件
import { emitter } from './event-bus.js'
emitter.emit('event-name', payload)

// 接收事件
import { emitter } from './event-bus.js'
emitter.on('event-name', payload => {
  console.log(payload)
})

// 移除监听
emitter.off('event-name')

最佳实践

为避免内存泄漏，应在组件销毁时移除事件监听器。在 Vue 2 中：

created() {
  EventBus.$on('event-name', this.handleEvent)
},
beforeDestroy() {
  EventBus.$off('event-name', this.handleEvent)
}

在 Vue 3 中使用 onUnmounted：

import { onUnmounted } from 'vue'

setup() {
  const handleEvent = (payload) => {
    console.log(payload)
  }

  emitter.on('event-name', handleEvent)
  onUnmounted(() => {
    emitter.off('event-name', handleEvent)
  })
}

注意事项

事件总线适合小型应用或简单场景，大型应用建议使用 Vuex 或 Pinia 进行状态管理。过度使用事件总线可能导致代码难以维护和调试。