vue事件总线

最新推荐文章于 2024-08-13 08:20:57 发布
原创 最新推荐文章于 2024-08-13 08:20:57 发布 · 144 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue

Vue2.x中常使用EventBus进行兄弟组件间的通信，但Vue3已不再支持此方法。官方推荐使用第三方库如mitt或tiny-emitter来实现相同功能。你可以选择这些库，或者自行构建一个简单的事件中心来处理组件间的通信需求。

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

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

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

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

mittgit地址
tiny-emittergit地址

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

参考这个

【uni-app】2-1 uniapp & vue 事件总线
蜗牛的博客
10-27 1098
事件总线可以作为组件沟通的桥梁，就像是所有组件共用相同的事件中心，可以向该中心注册发送事件或接收事件，所以组件都可以上下平行地通知其他组件，但也就是太方便所以若使用不慎，就会造成难以维护的灾难，因此才需要更完善的Vuex作为状态管理中心，将通知的概念上升到共享状态层次。
Vue事件总线（EventBus）使用指南：详细解析与实战应用
最新发布
Java_fenxiang的博客
08-16 1133
vue组件非常常见的有父子组件通信，兄弟组件通信。而父子组件通信就很简单，父组件会通过 props 向下传数据给子组件，当子组件有事情要告诉父组件时会通过 $emit 事件告诉父组件。今天就来说说如果两个页面没有任何引入和被引入关系，该如何通信了？如果咱们的应用程序不需要类似Vuex这样的库来处理组件之间的数据通信，就可以考虑Vue中的 事件总线 ，即EventBus来通信。EventBus 又称为事件总线。
发布订阅模式（一）：tiny-emitter
weixin_40756663的博客
07-03 1545
源码解读第二期，包模块tiny-emitter解读。
推荐开源项目：Tiny-Emitter - 轻量级事件发射器
gitblog_00003的博客
05-16 723
在现代JavaScript应用中，事件驱动模型是一种常见的编程模式，它使得组件间的交互变得简洁高效。今天，我们要向您推荐一个极小而强大的事件发射器库——Tiny-Emitter。它的体积小于1KB，但功能强大，足以满足您的大部分需求。 ## 项目介绍 [Tiny-Emitter](https://github.com/scottcorgan/tiny-emitter) 是一个极其小巧的事件监听...
Tiny-Emitter 使用教程
gitblog_00600的博客
08-13 554
Tiny-Emitter 是一个轻量级的事件发射器库，适用于现代 JavaScript 应用。它的体积非常小（少于1k），提供了基本的事件监听和触发功能，非常适合在需要事件驱动编程的场景中使用。 ## 项目快速启动 ### 安装 首先，你需要通过 npm 安装 Tiny-Emitter： ```bash npm install tiny-emitter --save ``` ### 基本...
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 805
Publisher 类维护了一个订阅者列表，可以注册和取消订阅者，并且可以向所有订阅者发送消息。发布-订阅模式（也称为观察者模式）是一种软件设计模式，允许对象（称为发布者）向多个对象（称为订阅者）发布信息，并允许订阅者获取这些信息。在示例中，我们创建了一个发布者实例和两个订阅者实例，并将订阅者注册到发布者中。然后，我们使用发布者的 notify 方法向所有订阅者发送消息，并使用 unregister 方法取消一个订阅者的注册。在发布-订阅模式中，发布者通常是一个对象，负责维护订阅者的列表并发布信息。
Vue事件总线插件监听在线/离线更改-JavaScript开发
05-26
vue-connection-listener Vue事件总线插件侦听在线/离线更改关于每当导航器的连接状态更改时，都会发出带有布尔有效载荷的“连接”事件，该负载指示新的st vue-connection-listener Vue事件总线插件侦听在线/离线...
vue-connection-listener:Vue事件总线插件监听在线离线更改
04-28
Vue事件总线插件监听在线/离线更改 关于 每当导航器的连接状态更改时，都会发出“连接”事件，并带有一个指示新状态的布尔有效负载（在线= true，离线= false）。 安装 npm install --save vue-connection-listener ...
Vue事件总线，组件通信，方法监听 emit、on
Bue_Sky的博客
09-18 648
Vue事件总线，组件通信，方法监听 emit、on 提示：主要在于记录使用方式 提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录Vue事件总线，组件通信，方法监听 emit、on一、父子组件通信二、通过Vue事件总线的方式实现非父子组件通信总结 一、父子组件通信 代码如下（示例）： <body> <div id="app"> <counter @change="handleChange"></counter&g
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 1647
父与子通信，使用props、$attrs、$parent、$emit；父与后代通信，使用provide、inject；任意组件间通信，使用事件总线。
Tiny Emitter 的使用与配置指南
gitblog_00629的博客
08-13 504
``` . ├── build # 构建输出目录 ├── src # 源代码目录 │ └── index.js # 主入口文件，TinyEmitter 类定义 ├── test # 测试代码目录 ├── .gitignore # Git 忽略文件列表 ├...
tiny-emitter 源码解析
超悠閒的博客
11-01 669
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 917
本文参加了由公众号@若川视野发起的每周源码共读活动，点击了解详情一起参与。 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 1035
代码】tiny-emitter.js一个小型的事件订阅发布库。
引入微小的革命：tiny-emitter，轻量级事件发射库
gitblog_01086的博客
08-13 796
在浩瀚的技术海洋中寻找一个既小巧又强大的工具并非易事。今天，我要向大家隆重介绍一款名为**tiny-emitter**的开源项目。这个项目如同它的名字一样——微小而精悍，却能在你的项目中发挥出巨大的作用。 ## 项目介绍 **tiny-emitter**是一款专注于提供高效、简洁的事件监听和触发机制的小型库。它体积仅小于1KB，在资源有限的环境下也能表现出色。无论是浏览器环境还是Node.js...
简易在uniapp使用tiny-emitter插件实现简单的发布订阅
H_Z_B的博客
03-21 480
简易在uniapp使用tiny-emitter插件实现简单的发布订阅
Vue3使用tiny-emitter实现兄弟组件传参
Link_Anew的博客
02-22 1063
【代码】Vue3使用tiny-emitter实现兄弟组件传参。
vue事件总线的缺点
08-01
回答: vue事件总线的缺点主要有以下几点。首先，由于事件总线是一个全局的对象，所以在大型项目中容易出现命名冲突的问题，即不同组件使用相同的事件名称可能会导致意外的触发。其次，事件总线的使用可能会导致代码...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值