eventbus vue实现
eventbus在Vue中的实现
EventBus是一种发布/订阅模式，用于Vue组件间的通信，尤其适合非父子关系的组件传递数据。以下是具体实现方式：
创建EventBus实例
在项目中新建一个文件（如event-bus.js），通过Vue实例创建EventBus：
import Vue from 'vue'
export const EventBus = new Vue()发送事件
在需要发送数据的组件中，通过$emit触发事件：
import { EventBus } from './event-bus.js'
EventBus.$emit('eventName', payloadData)其中payloadData可以是任意类型的数据。
接收事件
在需要接收数据的组件中，通过$on监听事件：
import { EventBus } from './event-bus.js'
EventBus.$on('eventName', (payload) => {
console.log('Received data:', payload)
})移除事件监听
为避免内存泄漏，需要在组件销毁时移除监听：
EventBus.$off('eventName')一次性事件监听
若只需监听一次事件，使用$once：
EventBus.$once('eventName', (payload) => {
console.log('This will trigger only once')
})实际应用示例
假设有两个独立组件ComponentA和ComponentB：
ComponentA（发送方）
methods: {
sendMessage() {
EventBus.$emit('message', 'Hello from ComponentA')
}
}ComponentB（接收方）
created() {
EventBus.$on('message', (msg) => {
console.log(msg) // 输出: Hello from ComponentA
})
},
beforeDestroy() {
EventBus.$off('message')
}注意事项
- 大型项目中过度使用EventBus可能导致事件流难以追踪，建议结合Vuex管理复杂状态
- 确保事件名称唯一，避免命名冲突
- 组件销毁时务必清理事件监听器
- 对于需要响应式更新的数据，建议仍使用props或Vuex
