Vue3 - 使用 mitt.js 进行组件通信（兄弟关系）

已于 2025-01-19 16:57:29 修改
阅读量3k 收藏 7
点赞数 5
CC 4.0 BY-SA版权
分类专栏： + Vue3 + Vue3 开发问题汇总 文章标签： vue3.js mitt.js 组件通信 兄弟组件传参 vue3官方文档
于 2022-11-18 23:27:06 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44198965/article/details/127875634
+ Vue3 同时被 2 个专栏收录
254 篇文章 ¥9.90 ¥99.00
订阅专栏
+ Vue3 开发问题汇总
153 篇文章 ¥9.90 ¥99.00
订阅专栏
本文介绍了在 Vue3 中如何使用 mitt.js 进行兄弟组件间的通信。通过创建一个 EventBus，并在组件中发送和接收事件，实现了数据传递。同时强调了组件卸载时关闭连接以避免内存泄漏的重要性。并提供了详细的教程链接和相关关键词。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

前言

在 Vue2 中，两个同级（兄弟关系）的组件传递数据，都是利用一个叫 EventBus 事件总线，利用这根总线，可以让两个毫无关系的组件进行通信。

其实这个问题的本质核心解决方案，就一句话。通过第三个 “东西”，一个往里写，一个读取。

在这里插入图片描述

而有的同学呢，选择了另外一种方式，那就是借助 Vuex 状态管理，同样的道理，借助第三方。

Mitt.js 安装及使用方法

那么在 Vue3 中，如何实现兄弟组件传参呢？

来看下官方文档，对于这件事的描述：

https://v3.cn.vuejs.org/guide/migration/events-api.html#%E6%A6%82%E8%A7%88

好，我们来使用 MITT 第三方库，首先第一步就是安装。

在项目根目录，执行命令：

// 来先来 ls 命令输出一下
了解本专栏 订阅专栏 解锁全文
Vue3中如何使用mitt进行兄弟组件通信
前端-尔嵘
03-09 1174
在Vue 3中，mitt是一个简单的事件总线库，用于在组件之间进行事件通信。它提供了一种简洁的方式来实现组件之间的解耦和通信，而无需引入Vuex或Vue的全局事件系统。mitt是一个非常轻量级的库，适用于简单的应用场景。如果你的项目需要更复杂的状态管理，可能需要考虑使用Vuex等更强大的工具。使用mitt时，需要注意避免内存泄漏，确保在组件销毁前取消订阅事件。通过mitt，你可以很方便地实现组件之间的解耦和通信，使得你的Vue应用更加灵活和可维护。
vue3 -- mitt 插件使用
King Saj
07-15 1642
mitt插件是Vue3中的一种第三方总线插件，它可以用于在组件之间进行通信。相比于Vue实例上的EventBus,mitt.js足够小，仅有200bytes,支持全部事件的监听和批量移除，它还不依赖Vue实例，所以可以跨框架使用，React或者Vue,甚至jQuery项目都能使用同一套库 .
Vue3 mitt 完整封装版事件总线教程
最新发布
Jinxiansen0211的博客
06-17 501
✅ 完全兼容 Vue3 Composition API✅ 支持 TypeScript 类型安全✅ 易扩展、可维护性强✅ 彻底代替传统 EventBus 全局污染问题。
Vue3中的常见组件通信之mitt
m0_63165331的博客
06-05 5115
本文讲述vue3中mitt的用法，mitt可以实现任意组件间的通信。
Vue3 mitt 组件通信 - 附完整示例
热门推荐
m0_48968874的博客
08-07 1万+
Vue2.x 使用 EventBus 进行组件通信，而 Vue3.x 中EventBus被弃用了，因此推荐使用 mitt.js。事件总线，是第三方插件。
Vue3使用mitt进行组件通信
icemwj的博客
05-31 2492
Vue3使用mitt进行组件通信
vue3中使用第三方插件mitt实现任意组件通讯
黄钢的博客
08-18 1764
组件通讯是vue3组合式开发的核心之一，现在我在写代码时，一个组件的代码超过了200行，基本都会拆分组件。
vue3中mitt.js使用
逍湘子
08-30 2367
vue3 mittjs
Vue3使用mitt实现组件通信
hello.reader
09-06 816
化的方式来构建复杂的应用程序。而在组件化开发过程中，组件之间的通信则是一个不可避免的问题。Vue3 提供了多种组件通信的方式，例如`props`、`emit`、`provide/inject`、`Vuex`等。本文将介绍另一种轻量级的组件通信方式：使用 `mitt` 来实现组件之间的松耦合通信。
vue3兄弟组件通信之第三方库/插件-mitt工具
前端很杂，故名前端杂货铺 —— coderkey
06-21 368
进行组件与插槽内容之间的通信，或者使用。和事件进行父子组件之间的通信，使用。中推荐的兄弟组件通信方案是通过。子组件 Test1.vue。子组件 Test2.vue。
vue3兄弟组件传值方式mitt.js
m0_50864962的博客
02-16 5344
vue3中兄弟组件传值的方式mitt 下载mitt yarn add mitt 或者 npm install mitt 方式一: 在main.js中注册挂载到全局 import { createApp } from 'vue' import { createPinia } from 'pinia' import App from './App.vue' // 导入mitt import mitt from 'mitt' const app = createApp(App) // vue3挂载到全局 ap
vue3 跨页面、组件 通讯 —— mitt.js
weixin_41964258的博客
12-29 3160
mitt.ts
Mitt.js 教程：快速入门与关键概念
gitblog_00187的博客
08-09 850
Mitt.js 教程：快速入门与关键概念 Mitt 是一个极简的事件处理器库，用于在JavaScript应用中管理事件监听和触发。以下是关于Mitt项目的基本结构、启动文件和配置文件的介绍。 1. 项目目录结构及介绍 在https://github.com/developit/mitt.git仓库中，Mitt 的目录结构相当简单： . ├── dist // 包含构建后的mitt....
Vue3 使用mitt实现兄弟组件通信
challenglistic的博客
07-12 2481
Vue3 使用mitt实现兄弟组件通信，
vue3中组件通信mitt（兄弟间、任意组件间）
菠萝蜜
08-06 1296
vue3中组件通信mitt（兄弟间、任意组件间）
Vue3.x 推荐使用 mitt.js
文摘资讯
06-13 5770
Vue2.x 使用 EventBus 进行组件通信，而 Vue3.x 推荐使用 mitt.js。比起 Vue 实例上的 EventBus，mitt.js 好在哪里呢？首先它足够小，仅有20...
js组件之间的通信
weixin_30512785的博客
08-27 144
应用场景： 1.在刷微博的时候，滑到某个头像上，会出现一张usercard（用户名片）, 微博列表区有这个usercard， 推荐列表也有这个usercard，评论区也有。 2.在网上购物时，购物车安静的停留在页面的角落里，不声不响。你在页面上买了零食买了书，购物车还是安静的呆着，猛然间点开一看，安静的购物车已经躺满了。 以上两种，在模块化满天飞的今天，当然不可能面向过程的一一开发，你不能在...
vue3兄弟组件通信-mitt
青春正在燃烧的博客
10-24 860
vue3兄弟节点通信使用mitt
Vue3 兄弟组件通信 mitt
朝花夕拾的博客
06-25 293
eventBus.$emit('openUserModal','参数')创建event-bus.js。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端开发大师鸭

请作者喝杯咖啡 :)

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值