vue3如何使用bus（事件总线）

🚀 个人简介：某大型国企资深软件开发工程师，信息系统项目管理师、CSDN优质创作者、阿里云专家博主，华为云云享专家，分享前端后端相关技术与工作常见问题~

💟 作者：码喽的自我修养🥰
📝 专栏：常用组件库与实用工具 🎉

🌈 创作不易，如果能帮助到带大家，欢迎 收藏+关注 哦 💕

🌈🌈文章目录

前言

一、创建事件总线

二、在组件中使用事件总线

1、在发送事件的组件中

三、详细解释

1、为什么使用事件总线

2、使用mitt库的优势

3、Vue 3中事件总线的替代方案

四、实例说明

1、创建一个新的Vue项目

2、创建事件总线

3、发送事件的组件

4、接收事件的组件

5、在主应用中使用组件

前言

在Vue 3中，可以通过创建一个事件总线（event bus）来实现组件之间的通信。要在Vue 3中使用事件总线，主要步骤有：1、创建一个新的Vue实例作为事件总线，2、在组件中引入并使用该事件总线。以下是详细的步骤和示例。

一、创建事件总线

在Vue 3中，创建事件总线的方式与Vue 2有所不同。Vue 3不再直接使用Vue实例作为事件总线，而是使用一个空的对象或使用 mitt 库。下面是如何创建一个简单的事件总线：

// bus.jsimport mitt from 'mitt';const emitter = mitt();export default emitter;

二、在组件中使用事件总线

创建好事件总线后，可以在组件中引入并使用它来触发和监听事件。以下是如何在两个组件中使用事件总线进行通信的示例：

1、在发送事件的组件中

// SenderComponent.vue<template><button @click="sendMessage">Send Message</button></template><script>import emitter from './bus';export default {methods: {sendMessage() {emitter.emit('message', 'Hello from SenderComponent');}}}</script>

三、详细解释

1、为什么使用事件总线

事件总线是一种轻量级的解决方案，用于在Vue组件之间进行通信，尤其是在没有直接父子关系的组件之间。它的主要优势包括：

简洁：只需要一个简单的对象或库即可实现。
灵活：可以在任何地方触发和监听事件。
低耦合：组件之间不需要知道彼此的存在。

2、使用mitt库的优势

在Vue 3中，推荐使用 mitt 库来创建事件总线，因为它更轻量、性能更好，而且与Vue 3的Composition API兼容。mitt库的主要优点包括：

轻量级：只有几百字节大小。
简单易用：API非常简洁，只有 emit 和 on 等少数几个方法。
性能优越：由于其实现简单，性能开销极低。

3、Vue 3中事件总线的替代方案

虽然事件总线是一种常见的解决方案，但在Vue 3中，还有其他几种替代方案可以实现组件间通信，如：

Vuex：适用于需要全局状态管理的复杂应用。
Provide/Inject：适用于祖先和后代组件之间的通信。
Composition API：通过组合函数共享逻辑。

四、实例说明

以下是一个完整的实例，展示了如何使用事件总线在两个没有直接关系的组件之间进行通信。

1、创建一个新的Vue项目

首先，创建一个新的Vue 3项目：

npm init vue@latest

按照提示创建项目后，安装 mitt 库：

npm install mitt

2、创建事件总线

在项目根目录下创建一个 bus.js 文件，并添加如下代码：

import mitt from 'mitt';const emitter = mitt();export default emitter;

3、发送事件的组件

在 src/components 目录下创建一个 SenderComponent.vue 文件，并添加如下代码：

<template><button @click="sendMessage">Send Message</button></template><script>import emitter from '../bus';export default {methods: {sendMessage() {emitter.emit('message', 'Hello from SenderComponent');}}}</script>

4、接收事件的组件

在 src/components 目录下创建一个 ReceiverComponent.vue 文件，并添加如下代码：

<template><div><p>Received Message: {{ message }}</p></div>
</template><script>
import emitter from '../bus';
export default {data() {return {message: ''}},mounted() {emitter.on('message', (msg) => {this.message = msg;});},beforeUnmount() {emitter.off('message');}
}</script>

5、在主应用中使用组件

在 src/App.vue 文件中，添加如下代码：

<template><div id="app"><SenderComponent /><ReceiverComponent /></div>
</template><script>import SenderComponent from './components/SenderComponent.vue';
import ReceiverComponent from './components/ReceiverComponent.vue';
export default {components: {SenderComponent,ReceiverComponent}
}</script>

到此这篇文章就介绍到这了,更多精彩内容请关注本人以前的文章或继续浏览下面的文章，创作不易，如果能帮助到大家,希望大家点点收藏+关注 ~💕

更多专栏订阅推荐：

🥕 JavaScript深入研究

👍 前端工程搭建
💕 vue从基础到起飞

✈️ HTML5与CSS3

🖼️ JavaScript基础

⭐️ uniapp与微信小程序

📝 前端工作常见问题与避坑指南

✍️ GIS地图与大数据可视化

📚 常用组件库与实用工具

💡 java入门到实战