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

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

💟 作者：码喽的自我修养🥰

📝 专栏：常用组件库与实用工具 🎉

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

🌈🌈文章目录

前言

[3、Vue 3中事件总线的替代方案](#3、Vue 3中事件总线的替代方案)

前言

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

一、创建事件总线

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

javascript 复制代码

// bus.js

import mitt from 'mitt';


const emitter = mitt();


export default emitter;

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

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

1、在发送事件的组件中

javascript 复制代码

// 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 库：

javascript 复制代码

npm install mitt

2、创建事件总线

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

javascript 复制代码

import mitt from 'mitt';

const emitter = mitt();

export default emitter;

3、发送事件的组件

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

javascript 复制代码

<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**文件，并添加如下代码：

javascript 复制代码

<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**文件中，添加如下代码：

javascript 复制代码

<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入门到实战