vue3如何使用bus(事件总线)

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

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

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

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

​ 🌈🌈文章目录

前言

一、创建事件总线

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

1、在发送事件的组件中

三、详细解释

1、为什么使用事件总线

2、使用mitt库的优势

[3、Vue 3中事件总线的替代方案](#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 库。下面是如何创建一个简单的事件总线:

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非常简洁,只有 emiton 等少数几个方法。
  • 性能优越:由于其实现简单,性能开销极低。

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

相关推荐
腾讯TNTWeb前端团队2 小时前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰6 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪6 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪6 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy7 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom7 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom7 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom7 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom7 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom8 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试