Vue 利用事件总线达成跨组件通信的方法

在 Vue 开发中，跨组件通信是一个常见的需求。当组件之间的层级关系较为复杂，或者需要在非父子组件之间传递数据时，事件总线（Event Bus）是一种简单有效的解决方案。

事件总线本质上是一个全局的事件发射器，它允许不同组件之间通过发布和订阅事件来进行通信。我们需要创建一个事件总线实例。在项目的 src 目录下，新建一个名为 eventBus.js 的文件，代码如下：

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

这里通过导出一个新的 Vue 实例作为事件总线，在其他组件中引入这个实例后，就可以使用它来进行事件的发布和订阅。

假设我们有两个非父子组件，组件 A 和组件 B。组件 A 想要向组件 B 发送数据。在组件 A 中，我们通过事件总线发布一个事件：

<template>
  <div>
    <button @click="sendMessage">发送消息</button>
  </div>
</template>

<script>
import { eventBus } from './eventBus';
export default {
  methods: {
    sendMessage() {
      eventBus.$emit('message', '这是来自组件 A 的消息');
    }
  }
}
</script>

在上述代码中，当按钮被点击时，通过 eventBus.$emit 方法触发了一个名为 message 的事件，并传递了一个字符串作为参数。

接下来，在组件 B 中，我们订阅这个事件：

<template>
  <div>
    <p>{{ receivedMessage }}</p>
  </div>
</template>

<script>
import { eventBus } from './eventBus';
export default {
  data() {
    return {
      receivedMessage: ''
    }
  },
  created() {
    eventBus.$on('message', (message) => {
      this.receivedMessage = message;
    });
  }
}
</script>

在组件 B 的 created 钩子函数中，使用 eventBus.$on 方法监听 message 事件。当事件被触发时，会执行回调函数，将接收到的消息赋值给 receivedMessage 数据属性，并显示在模板中。

利用事件总线进行跨组件通信，代码简洁明了，适用于小型项目或简单的跨组件通信场景。但在大型项目中，随着组件数量的增多，事件总线可能会变得难以维护。此时，Vuex 等状态管理库是更好的选择。不过，理解并掌握事件总线的使用方法，对于 Vue 开发者来说，仍是一项重要的技能。