eventbus vue实现
实现 EventBus 的步骤
在 Vue 中实现 EventBus 可以通过创建一个独立的 Vue 实例作为事件中心，用于组件间的通信。以下是具体实现方法：
创建 EventBus 实例
// event-bus.js
import Vue from 'vue';
export const EventBus = new Vue();在组件中使用 EventBus
发送事件：
import { EventBus } from './event-bus.js';
// 发送事件
EventBus.$emit('event-name', payload);监听事件：
import { EventBus } from './event-bus.js';
// 监听事件
EventBus.$on('event-name', (payload) => {
// 处理事件
});移除事件监听：
// 移除单个事件监听
EventBus.$off('event-name');
// 移除所有事件监听
EventBus.$off();全局 EventBus 实现
如果需要在整个应用中使用 EventBus，可以将其挂载到 Vue 原型上：
// main.js
import Vue from 'vue';
import App from './App.vue';
Vue.prototype.$eventBus = new Vue();
new Vue({
render: h => h(App),
}).$mount('#app');使用方式：
// 发送事件
this.$eventBus.$emit('event-name', payload);
// 监听事件
this.$eventBus.$on('event-name', (payload) => {
// 处理事件
});注意事项
- 避免内存泄漏，确保在组件销毁时移除事件监听
- 大型项目建议使用 Vuex 进行状态管理，EventBus 适合简单场景
- 事件命名建议使用常量，避免拼写错误
完整示例
// event-bus.js
import Vue from 'vue';
export const EventBus = new Vue();
// ComponentA.vue (发送事件)
<template>
<button @click="sendMessage">Send Message</button>
</template>
<script>
import { EventBus } from './event-bus.js';
export default {
methods: {
sendMessage() {
EventBus.$emit('message-sent', { text: 'Hello from Component A' });
}
}
}
</script>
// ComponentB.vue (接收事件)
<template>
<div>{{ message }}</div>
</template>
<script>
import { EventBus } from './event-bus.js';
export default {
data() {
return {
message: ''
}
},
created() {
EventBus.$on('message-sent', (payload) => {
this.message = payload.text;
});
},
beforeDestroy() {
EventBus.$off('message-sent');
}
}
</script>
