vue eventBus 的使用

在 Vue 中，你可以使用事件总线（Event Bus）来实现组件之间的通信。事件总线是一个空的 Vue 实例，可以用于触发和监听自定义事件。

首先，在你的项目中创建一个新的 Vue 实例作为事件总线：

// eventBus.js

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

然后，在需要通信的组件中，你可以使用事件总线来触发事件或监听事件：

// ComponentA.vue

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

export default {
  methods: {
    sendMessage() {
      eventBus.$emit('message', 'Hello from Component A!');
    }
  }
}

// ComponentB.vue

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

export default {
  data() {
    return {
      receivedMessage: ''
    };
  },
  mounted() {
    eventBus.$on('message', (message) => {
      this.receivedMessage = message;
    });
  }
}

在上面的示例中，ComponentA 在方法中通过 `eventBus.$emit` 触发了名为 `message` 的自定义事件，并传递了消息内容。而 ComponentB 在 `mounted` 钩子函数中通过 `eventBus.$on` 监听了 `message` 事件，当事件触发时会执行回调函数并将消息内容赋值给 `receivedMessage`。

这样，ComponentA 和 ComponentB 之间就可以通过事件总线进行通信了。请确保在不需要通信时及时销毁事件监听，以避免内存泄漏。

注意：事件总线在组件之间是全局共享的，可以用于任意组件之间的通信。但是如果你的项目越来越复杂，建议考虑使用更好的状态管理方案，如 Vuex。