当前位置：首页 > VUE

vue实现eventbus

2026-03-27 23:36:55VUE

Vue 实现 EventBus

EventBus 是 Vue 中实现组件间通信的一种方式，适用于非父子组件或跨层级组件间的通信。以下是实现 EventBus 的具体方法：

创建 EventBus

创建一个单独的 Vue 实例作为事件总线（EventBus），通常将其放在一个独立的文件中以便全局使用。

// eventBus.js
import Vue from 'vue';
export const EventBus = new Vue();

发送事件

在需要发送事件的组件中，通过 EventBus.$emit 方法触发事件，并传递数据。

// ComponentA.vue
import { EventBus } from './eventBus.js';

export default {
  methods: {
    sendMessage() {
      EventBus.$emit('message-event', { data: 'Hello from Component A' });
    }
  }
};

接收事件

在需要接收事件的组件中，通过 EventBus.$on 方法监听事件，并在回调函数中处理数据。

// ComponentB.vue
import { EventBus } from './eventBus.js';

export default {
  created() {
    EventBus.$on('message-event', (payload) => {
      console.log('Received message:', payload.data);
    });
  },
  beforeDestroy() {
    EventBus.$off('message-event'); // 避免内存泄漏
  }
};

移除事件监听

为了避免内存泄漏，需要在组件销毁前移除事件监听。使用 EventBus.$off 方法取消监听。

// ComponentB.vue
beforeDestroy() {
  EventBus.$off('message-event');
}

一次性事件监听

如果只需要监听事件一次，可以使用 EventBus.$once 方法。

// ComponentB.vue
created() {
  EventBus.$once('message-event', (payload) => {
    console.log('Received once:', payload.data);
  });
}

全局注册 EventBus

为了更方便地使用 EventBus，可以将其挂载到 Vue 原型上，这样在所有组件中都可以通过 this.$eventBus 访问。

// main.js
import Vue from 'vue';
import { EventBus } from './eventBus.js';

Vue.prototype.$eventBus = EventBus;

之后在组件中可以直接使用：

vue实现eventbus

// ComponentA.vue
this.$eventBus.$emit('message-event', { data: 'Hello' });

// ComponentB.vue
this.$eventBus.$on('message-event', (payload) => {
  console.log(payload.data);
});