vue事件总线

最新推荐文章于 2024-08-13 08:20:57 发布
最新推荐文章于 2024-08-13 08:20:57 发布
阅读量131 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/andy_csdn007/article/details/115119915
Vue2.x中常使用EventBus进行兄弟组件间的通信，但Vue3已不再支持此方法。官方推荐使用第三方库如mitt或tiny-emitter来实现相同功能。你可以选择这些库，或者自行构建一个简单的事件中心来处理组件间的通信需求。

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

vue2x有eventbs,实现兄弟组件之间的通信

使用方法
https://zhuanlan.zhihu.com/p/72777951

3x后尴尬了
参考 https://blog.youkuaiyun.com/wu_xianqiang/article/details/108702570

Vue3不支持eventBus，那么官方推荐的做法是使用第三方库：

mittgit地址
tiny-emittergit地址

当然你也可以自己实现一个

参考这个

Vue事件总线（EventBus）的概念、使用以及注意事项
weixin_53216033的博客
07-23 1850
在Vue开发中，组件间的通信是不可避免的需求。对于父子组件间的通信，Vue提供了props和$emit/$on等内置机制。然而，当需要在非父子关系的组件间进行通信时，这些内置机制就显得力不从心了。这时，Vue事件总线（EventBus）作为一种灵活的解决方案应运而生啦。本篇文章将详细讲解Vue事件总线的原理、安装、使用及最佳实践，帮助大家更好地去理解和应用这一技术。
【uni-app】2-1 uniapp & vue 事件总线
蜗牛的博客
10-27 1030
事件总线可以作为组件沟通的桥梁，就像是所有组件共用相同的事件中心，可以向该中心注册发送事件或接收事件，所以组件都可以上下平行地通知其他组件，但也就是太方便所以若使用不慎，就会造成难以维护的灾难，因此才需要更完善的Vuex作为状态管理中心，将通知的概念上升到共享状态层次。
发布订阅模式（一）：tiny-emitter
weixin_40756663的博客
07-03 1479
源码解读第二期，包模块tiny-emitter解读。
推荐开源项目：Tiny-Emitter - 轻量级事件发射器
gitblog_00003的博客
05-16 691
推荐开源项目：Tiny-Emitter - 轻量级事件发射器 在现代JavaScript应用中，事件驱动模型是一种常见的编程模式，它使得组件间的交互变得简洁高效。今天，我们要向您推荐一个极小而强大的事件发射器库——Tiny-Emitter。它的体积小于1KB，但功能强大，足以满足您的大部分需求。 项目介绍 Tiny-Emitter 是一个极其小巧的事件监听和触发库。通过简单的API，您可以轻松地为...
tiny-emitter:一个很小的（少于1k）事件发射器库
05-06
微小的发射器 一个很小的（小于1k）事件发射器库。 安装 npm npm install tiny-emitter --save 用法 var Emitter = require ( 'tiny-emitter' ) ; var emitter = new Emitter ( ) ; emitter . on ( 'some-event' , function ( arg1 , arg2 , arg3 ) { // } ) ; emitter . emit ( 'some-event' , 'arg1 value' , 'arg2 value' , 'arg3 value' ) ; 或者，您可以通过要求tiny-emitter/instance来跳过初始化步骤。 这将引入一个已经初始化的发射器。 var emitter = require ( 'tiny-emitter/insta
mitt tiny-emitter发布订阅应用场景源码
Free雅轩的博客
01-29 752
Publisher 类维护了一个订阅者列表，可以注册和取消订阅者，并且可以向所有订阅者发送消息。发布-订阅模式（也称为观察者模式）是一种软件设计模式，允许对象（称为发布者）向多个对象（称为订阅者）发布信息，并允许订阅者获取这些信息。在示例中，我们创建了一个发布者实例和两个订阅者实例，并将订阅者注册到发布者中。然后，我们使用发布者的 notify 方法向所有订阅者发送消息，并使用 unregister 方法取消一个订阅者的注册。在发布-订阅模式中，发布者通常是一个对象，负责维护订阅者的列表并发布信息。
Tiny-Emitter 使用教程
gitblog_00600的博客
08-13 469
Tiny-Emitter 使用教程 项目介绍 Tiny-Emitter 是一个轻量级的事件发射器库，适用于现代 JavaScript 应用。它的体积非常小（少于1k），提供了基本的事件监听和触发功能，非常适合在需要事件驱动编程的场景中使用。 项目快速启动 安装 首先，你需要通过 npm 安装 Tiny-Emitter： npm install tiny-emitter --save 基本用法 以...
Vue事件总线插件监听在线/离线更改-JavaScript开发
05-26
vue-connection-listener Vue事件总线插件侦听在线/离线更改关于每当导航器的连接状态更改时，都会发出带有布尔有效载荷的“连接”事件，该负载指示新的st vue-connection-listener Vue事件总线插件侦听在线/离线...
vue 事件总线（总线传值），eventBus的使用
PrimaryColor
08-24 1109
介绍： vue组件通信有很多，比如父子组件，兄弟组件通信，还有vuex。如果两个组件之间不存在父子，也不存在兄弟关系的时候，那要是想在一个组件里面点击了一个按钮，并触发另一个组件刷新数据的时候该怎么办？ 首先可以想到的是使用vuex，点击按钮的时候修改vuex里面的值，然后在另一个组件里面监听这个值，当发生变化的时候并刷新数据。 逻辑上是可以的，不过就是太麻烦了，今天给大家推荐一个新的组件传值方式，总线传值eventBus。 一、首先在main.js里面初始化一个事件总线实例。 其实就是重新构造一
vue-connection-listener:Vue事件总线插件监听在线离线更改
04-28
Vue事件总线插件监听在线/离线更改 关于 每当导航器的连接状态更改时，都会发出“连接”事件，并带有一个指示新状态的布尔有效负载（在线= true，离线= false）。 安装 npm install --save vue-connection-listener ...
tiny-typed-emitter:完全类型检查的 NodeJS EventEmitter
08-04
微型发射器 让您的事件及其侦听器在的情况下进行类型检查。 安装 只需使用npm添加依赖项： $ npm i tiny-typed-emitter 或使用纱线： $ yarn add tiny-typed-emitter 用法 导入小类型发射器库： import { TypedEmitter } from 'tiny-typed-emitter' ; 定义事件及其侦听器签名（注意：事件名称周围的引号不是强制性的）： interface MyClassEvents { 'added' : ( el : string , wasNew : boolean ) => void ; 'deleted' : ( deletedCount : number ) => void ; } 在此步骤中，根据您的用例，您可以： 定义扩展EventEmitter的自定义类： clas
vue3组件间通信
m0_52744273的博客
04-01 1620
父与子通信，使用props、$attrs、$parent、$emit；父与后代通信，使用provide、inject；任意组件间通信，使用事件总线。
Tiny Emitter 的使用与配置指南
gitblog_00629的博客
08-13 447
Tiny Emitter 的使用与配置指南 项目目录结构及介绍 . ├── build # 构建输出目录 ├── src # 源代码目录 │ └── index.js # 主入口文件，TinyEmitter 类定义 ├── test # 测试代码目录 ├── .gitigno...
tiny-emitter 源码解析
超悠閒的博客
11-01 632
tiny-emitter 源码解析 文章目录tiny-emitter 源码解析正文0. 关于 Emitter1. 源码结构2. 监听事件 on3. 取消监听 off4. 触发事件 emit5. 单次触发事件 once其他资源参考连接阅读笔记参考 正文 0. 关于 Emitter tiny-emitter 是 Node 提供的 EventEmitter 的简单版本，也就是面试的时候常见的 Emitter 实现 1. 源码结构 tiny-emitter 的源码就只有一个 index.js 文件 /index.
从mitt、tiny-emitter源码中学习手写订阅发布
一位大二学生学习前端之路
05-16 872
本文参加了由公众号@若川视野发起的每周源码共读活动，点击了解详情一起参与。 1. 前言 这次学习的项目是 mitt tiny-emitter 1.1 你能学到😎 发布订阅模式 了解 mitt、tiny-emitter 用法 以及他们的应用场景 具体实现 2. 这个库，是干啥的😶 老规矩，先看README mitt Tiny 200b functional event emitter / pubsub. Microscopic: weighs less than 200 bytes gzip.
tiny-emitter.js：一个小型的事件订阅发布库
彭世瑜的博客
07-24 916
代码】tiny-emitter.js一个小型的事件订阅发布库。
引入微小的革命：tiny-emitter，轻量级事件发射库
最新发布
gitblog_01086的博客
08-13 762
引入微小的革命：tiny-emitter，轻量级事件发射库 在浩瀚的技术海洋中寻找一个既小巧又强大的工具并非易事。今天，我要向大家隆重介绍一款名为tiny-emitter的开源项目。这个项目如同它的名字一样——微小而精悍，却能在你的项目中发挥出巨大的作用。 项目介绍 tiny-emitter是一款专注于提供高效、简洁的事件监听和触发机制的小型库。它体积仅小于1KB，在资源有限的环境下也能表现出色。...
简易在uniapp使用tiny-emitter插件实现简单的发布订阅
H_Z_B的博客
03-21 449
简易在uniapp使用tiny-emitter插件实现简单的发布订阅
Vue3使用tiny-emitter实现兄弟组件传参
Link_Anew的博客
02-22 999
【代码】Vue3使用tiny-emitter实现兄弟组件传参。
vue事件总线的缺点
08-01
回答: vue事件总线的缺点主要有以下几点。首先，由于事件总线是一个全局的对象，所以在大型项目中容易出现命名冲突的问题，即不同组件使用相同的事件名称可能会导致意外的触发。其次，事件总线的使用可能会导致代码...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值