Vue 事件总线介绍及使用方法

在 Vue 开发中，事件总线（Event Bus）是一种非常实用的组件通信方式。它为非父子组件之间的通信提供了一种简单有效的解决方案。

事件总线本质上是一个全局的事件调度中心，它通过创建一个全局的 Vue 实例来实现。这个实例就像是一个中转站，各个组件都可以向它发送事件，也可以监听它发出的事件，从而实现组件之间的数据传递和交互。

我们来看看如何创建一个事件总线。在项目中，我们可以专门创建一个 js 文件，例如 eventBus.js，在其中创建一个全局的 Vue 实例：

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

接下来就是在组件中使用事件总线了。在需要发送事件的组件里，我们通过引入刚才创建的 eventBus 实例，然后使用 $emit 方法来触发事件并传递数据。比如在组件 A 中：

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

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

而在需要接收事件的组件 B 中，我们同样引入 eventBus 实例，然后使用 $on 方法来监听事件并处理接收到的数据：

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

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

这样，当在组件 A 中点击按钮时，就会触发 message 事件并传递数据，组件 B 监听到该事件后，就会更新自身的数据显示。

需要注意的是，事件总线在小型项目中使用非常方便，但在大型项目中，由于组件众多，可能会导致事件管理变得复杂。此时，可以考虑使用 Vuex 等状态管理库来更好地管理组件间的通信和状态。不过，事件总线作为一种简单直接的通信方式，在合适的场景下依然有着不可替代的作用，开发者可以根据项目实际情况灵活运用。