vue eventbus

Vue.js 中的 EventBus 是一种用于在组件之间进行通信的机制。它允许你在不同的组件中发送和接收事件，以实现组件之间的解耦和交互。

在 Vue.js 中使用 EventBus，你需要创建一个中央事件总线（EventBus）实例，它可以作为一个简单的 Vue 实例来充当事件中心。你可以在任何组件中引用该实例，并使用它来发送和接收事件。

以下是一个简单的 EventBus 的实现示例：

1. 创建 EventBus 实例：

// EventBus.js

import Vue from 'vue';
export const EventBus = new Vue();

2. 在发送事件的组件中使用 EventBus：

// ComponentA.vue

import { EventBus } from './EventBus.js';

export default {
  methods: {
    sendData() {
      // 发送名为 'eventA' 的事件，并传递数据
      EventBus.$emit('eventA', data);
    }
  }
}

3. 在接收事件的组件中使用 EventBus：

// ComponentB.vue

import { EventBus } from './EventBus.js';

export default {
  created() {
    // 监听名为 'eventA' 的事件
    EventBus.$on('eventA', this.handleEventA);
  },
  methods: {
    handleEventA(data) {
      // 处理接收到的事件和数据
      console.log('Received eventA:', data);
    }
  }
}

通过上述步骤，ComponentA 可以通过发送名为 'eventA' 的事件，并传递数据，而 ComponentB 则可以通过监听 'eventA' 事件来接收并处理数据。这样，两个组件之间就可以进行通信了。

注意：为了避免内存泄漏，记得在组件销毁前取消对事件的监听，即在组件的 `beforeDestroy` 生命周期钩子中使用 `EventBus.$off('eventA')` 来取消监听。