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

相关推荐
Bob99981 分钟前
Amlogic S905L3系列盒子 ROM DIY相关
java·javascript·数据仓库·vscode·eclipse·tomcat·vim
孤鸿玉2 分钟前
[Flutter小试牛刀] 低配版signals,添加局部刷新
前端·flutter
亦黑迷失4 分钟前
轻量级 Express 服务器:用 Pug 模板引擎实现动态参数传递
前端·javascript·后端
吃瓜群众i1 小时前
理解Javascript闭包
前端·javascript
安大桃子1 小时前
Mapbox GL + Deck.gl 三维实战:Mapbox 加载 Tileset3D 倾斜摄影模型
前端·webgl
yede1 小时前
多行文本省略号显示,更多按钮展开全部
前端
就是我1 小时前
React 应用性能优化实战
前端·react.js·性能优化
G扇子1 小时前
深入解析XSS攻击:从原理到防御的全方位指南
前端·安全
Blucas1 小时前
《深入 PageSpy》二:入门指南
javascript·前端框架
snakeshe10101 小时前
入解析React性能优化策略:eagerState的工作原理
前端