当前位置：首页 > VUE

vue实现eventbus

2026-03-07 13:38:17VUE

Vue 中实现 EventBus

在 Vue 中，EventBus 是一种跨组件通信的机制，尤其适用于非父子组件之间的通信。以下是实现 EventBus 的几种方法：

使用 Vue 实例作为 EventBus

创建一个单独的 Vue 实例作为事件总线，通过 $emit 和 $on 实现事件的发布与订阅。

// 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('Received event:', payload);
});

使用全局 Vue 实例作为 EventBus

可以直接将 EventBus 挂载到 Vue 的原型上，方便全局调用。

// main.js
import Vue from 'vue';
Vue.prototype.$eventBus = new Vue();

// 组件中使用
this.$eventBus.$emit('event-name', payload);
this.$eventBus.$on('event-name', (payload) => {
  console.log('Received event:', payload);
});

移除事件监听

为了避免内存泄漏，需要在组件销毁时移除事件监听。

import { EventBus } from './event-bus.js';

EventBus.$on('event-name', callback);

// 组件销毁时移除监听
beforeDestroy() {
  EventBus.$off('event-name', callback);
}

使用 mitt 库

如果项目不依赖 Vue 实例，可以使用轻量级的 mitt 库实现 EventBus。

安装 mitt：

npm install mitt

创建 EventBus：

// event-bus.js
import mitt from 'mitt';
export const EventBus = mitt();

使用方式：

vue实现eventbus

import { EventBus } from './event-bus.js';

// 发送事件
EventBus.emit('event-name', payload);

// 监听事件
EventBus.on('event-name', (payload) => {
  console.log('Received event:', payload);
});

// 移除监听
EventBus.off('event-name', callback);