vue实现总线监听
Vue 事件总线实现方法
在 Vue 中实现事件总线（Event Bus）可以通过创建一个新的 Vue 实例作为中央事件总线，用于不同组件间的通信。这种方法适合非父子组件或跨层级组件之间的通信。
创建事件总线实例
// event-bus.js
import Vue from 'vue'
export const EventBus = new Vue()发送事件
在需要发送事件的组件中，使用 $emit 方法触发事件：
import { EventBus } from './event-bus.js'
EventBus.$emit('event-name', payload)监听事件
在需要接收事件的组件中，使用 $on 方法监听事件：
import { EventBus } from './event-bus.js'
EventBus.$on('event-name', (payload) => {
console.log('Received event:', payload)
})移除事件监听
为避免内存泄漏，在组件销毁时移除事件监听：
import { EventBus } from './event-bus.js'
EventBus.$off('event-name')一次性事件监听
如果只需要监听一次事件，可以使用 $once 方法：
EventBus.$once('event-name', (payload) => {
console.log('This will only trigger once')
})注意事项
- 事件总线适合小型项目或简单场景，复杂项目建议使用 Vuex 进行状态管理
- 确保在组件销毁时移除事件监听，避免内存泄漏
- 事件名最好使用常量定义，避免拼写错误
- 大型项目中过度使用事件总线可能导致代码难以维护
