VUE3基础教程：Vue.js事件总线的使用

在Vue.js开发中，事件总线是一种非常实用的机制，尤其在组件间通信场景下，发挥着重要作用。在Vue 3中，虽然Composition API和Vuex等方式在组件通信上有出色表现，但事件总线依然有其独特价值。

事件总线本质上是一个全局的事件中心，它允许不同组件之间方便地进行事件传递和接收。我们需要创建一个事件总线实例。在项目的src目录下，新建一个文件，例如eventBus.js 。在这个文件中，我们使用Vue的 createApp 方法创建一个空的应用实例，并将其导出。代码如下：

import { createApp } from 'vue';
const eventBus = createApp({}).config.globalProperties;
export default eventBus;

接下来，在需要发送事件的组件中引入这个事件总线实例。假设我们有一个组件 ComponentA.vue，在其中触发一个名为 messageSent 的事件，传递一个字符串消息：

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

<script setup>
import eventBus from './eventBus.js';
const sendMessage = () => {
  eventBus.$emit('messageSent', '这是来自ComponentA的消息');
};
</script>

而在接收事件的组件 ComponentB.vue 中，同样引入事件总线实例，并监听 messageSent 事件：

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

<script setup>
import eventBus from './eventBus.js';
import { ref } from 'vue';
const receivedMessage = ref('');
eventBus.$on('messageSent', (message) => {
  receivedMessage.value = message;
});
</script>

这样，当在 ComponentA 中点击按钮时，ComponentB 就能接收到发送过来的消息并显示。

需要注意的是，事件总线在小型项目或简单组件通信中非常便捷，但在大型项目里，如果过度使用可能会导致代码难以维护，因为事件的流向不够清晰。所以，在使用事件总线时，要根据项目实际情况合理运用，确保代码的可维护性和可读性。掌握Vue.js事件总线的使用，能让我们在组件通信方面更加得心应手，提升开发效率。