在Vue.js中有一种使用event emitters通过父组件在两个子组件之间进行通信的方法。在子组件中设置事件并在父组件中设置侦听器时，响应式将通过父组件向下传递到嵌套组件。

虽然这是一个有价值的解决方案，但随着项目的发展，它可能会变得笨拙。事件总线是一个 Vue.js 实例，它可以在一个组件中发出事件，然后直接侦听并响应另一个组件中发出的事件——无需父组件的帮助。事件总线比发射器更高效，因为它需要更少的代码来运行。

在本教程中，我们将在 Vue.js 项目中创建一个事件总线，以促进两个组件之间通过私有通道进行通信。这通常称为发布-订阅方法。


(资料图片)

先决条件

这篇文章适合所有阶段的开发人员，包括初学者。在阅读本文之前，您应该已经具备以下几点：

已安装版本 14.18+ 及更高版本的Node.js。您可以通过在终端/命令提示符下运行以下命令来验证您是否具有此版本：node -v安装了 npm 版本 6.x 及更高版本。在终端中使用以下命令验证安装的版本：npm -vVisual Studio Code Editor 或类似的代码编辑器运行以下命令来搭建 Vite 和 Vue 项目的基架：
# npm 6.xnpm create vite@latest event-bus-tutorial --template vue# npm 7+, extra double-dash is needed:npm create vite@latest event-bus-tutorial -- --template vue
导航到 event-bus-tutorial 目录并使用 npm 安装所需的依赖项：
cd event-bus-tutorialnpm install
在 Vue 2 中使用事件总线模式

在 Vue 2.x 中，Vue 实例可用于触发通过事件发射器 API（$on、$off和$once） 强制附加的处理程序。

为了使用事件总线模式，你所要做的就是创建一个 Vue 构造函数的新实例，将该实例分配给一个名为eventBus的常量变量，然后将其导出。这个实例充当事件总线，允许 Vue 应用程序中的不同组件相互通信：

// eventBus.jsconst eventBus = new Vue()export default eventBus

导入 eventBus 实例并在要接收事件的组件中，添加事件侦听器：

// ChildComponent.vueimport eventBus from "./eventBus"export default {  mounted() {    // adding eventBus listener    eventBus.$on("custom-event", () => {      console.log("Custom event triggered!")    })  },  beforeDestroy() {    // removing eventBus listener    eventBus.$off("custom-event")  }}

导入eventBus实例并在要发送事件的组件中，添加事件发射器：

// ParentComponent.vueimport eventBus from "./eventBus"export default {  methods: {    sendCustomEvent() {      // sending the event      eventBus.$emit("custom-event")    }  }}
Vue 3 中的事件总线入门

在 Vue 3 中，$on、$off和$once方法已从 Vue 实例中完全删除。因此，为了使用事件总线模式，必须安装外部事件发射器和侦听器包，例如mitt。

使用以下命令安装mitt包并开始提供应用程序：

npm install --save mittnpm run dev

main.js 打开位于目录 src 中的文件，并修改其中的代码，如下所示：

import { createApp } from "vue"import mitt from "mitt"import App from "./App.vue"const emitter = mitt()const app = createApp(App)app.config.globalProperties.emitter = emitterapp.mount("#app")

这段代码通过创建一个发射器实例，使其通过 Vue 应用程序实例全局访问，并将应用程序挂载到 DOM 中，将 mitt 事件发射器库与 Vue 3 应用程序集成。这允许组件使用发射器发出和侦听事件，而无需直接导入。

创建我们的子组件

在我们的演示中，我们将创建两个子组件，它们需要在不使用父组件作为中介的情况下相互通信。首先，在components目录中创建一个名为Child1.vue的新文件，并将以下代码块粘贴到其中：

<script >export default {  name: "Child1",  data: () => ({    counter: 0,  }),  methods: {},};</script>

总体而言，此代码呈现一个

包含样式的

推荐内容