vue3跨组件(多组件)通信:事件总线【Event Bus】

★推荐方案:使用 `events` npm库;
可用范围:vue、react、angular等任何框架都可使用;且使用方式完全一致;

本文仅介绍、讲解对web页面端项目的常用API;通过events实现事件总线功能;

event库概述:本次所使用到的库为通用库,若在node环境使用则无需npm安装,本身自带的;浏览器环境下使用才需要npm安装。
events库是从 Node.js 上移植Events模块的功能,因此可用的API完全一致(除了仅限在node环境下使用的API);
若想进一步深入,去看node官网的event文档即可。(注意版本差异!根据npm文档的描述,该库目前并未同步最新Node里对应的events模块)

在VUE3的官方文档中描述到:【平级组件或是跨越多层嵌套的组件间通信,应使用一个外部的事件总线,或是使用一个全局状态管理方案】。全局状态管理就则是像pinia这种,本文就主要讲述事件总线;
VUE2的话直接用官方API提供的即可,当然如果vue2的相关API实现的事件总线不满足需求,那自然也是推荐使用events库的!


events库使用方式:

1、安装

npm install events

2、引入使用、封装

import { EventEmitter } from 'events';// 大家根据各自业务需求自行封装对应风格的事件总线模块;
export const emitter = new EventEmitter();// 创建多个事件总线,互不干扰。
export const emitter2 = new EventEmitter();

这样我们就创建好了一个简单的事件总线实例,也可以创建多个事件总线

3、注册监听器:eventEmitter.on() 与监听函数的this指向;

类型:on(eventName: string | symbol, listener: (...args: any[]) => void): this;

别名:emitter.addListener(eventName, listener)


import { emitter,emitter2 } from '@/utils/events'// 可接收多个参数,若emit触发该监听函数时未传参则是undefined// 第一个参数类型:eventName: string | symbol// 第二个参数类型: listener: (...args: any[]) => voidemitter.on('test1',function (val,val2,val3){console.log(val,val2,val3,'可接受多个参数!');console.log(this,'该this指向为emitter实例,若监听函数为箭头函数,则该处this指向不用我解释了吧?这是基础啊');})emitter.on('test1',function (){console.log('可多次注册同名的test1监听函数;注意事项看 《7、监听数量相关内容》 ');})// 按上一步所示,不同事件总线实例创建监听器时eventName同名也不会互相影响;emitter2.on('test1',(val)=>{console.log(val);})function emitTest() { // 标准写法,这样才可off卸载监听函数;上面2个例子只是展示功能作用;console.log('葬送的芙莉莲');}emitter.on('emitTest',emitTest)emitter.off('emitTest',emitTest)

另外,EventEmitter 按照注册的顺序同步地调用所有监听器。 这确保了事件的正确排序,并有助于避免竞争条件和逻辑错误。 

4、触发监听器事件:eventEmitter.emit()

emit类型为:emit(eventName: string | symbol, ...args: any[]): boolean;

下面代码中的 `emitter.emit('test1',1,'向监听的函数传入多个参数') ` 表示触发所有 test1 的监听函数,并传入后面那2个参数。

返回值:如果事件有监听器,则返回 true,否则返回 false

import { emitter,emitter2 } from '@/utils/events'emitter.emit('test1',1,'向监听的函数传入多个参数')emitter2.emit('test1','来自 emitter2 的问候.')// boolean返回值表示未触发该监听函数;下面两个emit返回的结果都是falseconst has = emitter2.emit('emitTest','返回false') // 就算on创建过监听函数,off后此时触发不到也是返回falseconst has2 = emitter2.emit('test666','返回false')

5、仅触发一次监听器事件:eventEmitter.once() 

类型:once(eventName: string | symbol, listener: (...args: any[]) => void): this;

使用 eventEmitter.once() 方法,可以注册一个监听器,该监听器最多为特定事件调用一次。 一旦事件被触发,则监听器就会 先被注销 然后再调用该监听函数。

import { emitter,emitter2 } from '@/utils/events'let countt = 0emitter.once('test2',function () {++counttconsole.log(countt);})

import { emitter } from '@/utils/events'function demo (){let has = emitter.emit('test2')console.log(has); 
}
demo(); // 第一次Log是true,emit.once执行一次后就会销毁
demo(); // 销毁后再执行自然是找不到该监听函数的,所以返回false

6、卸载/销毁 监听器    emitter.off()

类型:off(eventName: string | symbol, listener: (...args: any[]) => void): this;

别名:emitter.removeListener()

从名为 eventName 的事件的监听器数组中移除指定的 listener。
on、once创建的监听器都可用off销毁;


import { emitter } from '@/utils/events'function emitTest() {console.log('葬送的芙莉莲');}emitter.on('emitTest',emitTest)emitter.off('emitTest',emitTest)

6、监听EventEmitter的 on、off 事件;

import { EventEmitter } from 'events';export const emitter = new EventEmitter();
// 在将监听器添加到其内部监听器数组之前,EventEmitter 实例将触发自身的 'newListener' 事件。
// 以此来监听 `事件总线` 的添加事件;
emitter.on('newListener', (eventName, listener) => {console.log(eventName, listener,'这是添加');
});
// 同理,监听删除事件
emitter.on('removeListener', (eventName, listener) => {console.log(eventName, listener,'这是删除');
});

7、监听数量相关内容:

  1. 默认监听同一事件名的最大数量为10,若是注册超过10个以上则会抛出警告。
  2. emitter.getMaxListeners() 获取emitter事件总线实例可注册监听器同一事件名的最大数量,默认为10;

  3. 通过emitter.setMaxListeners(8) 来更改限制,传入Infinity(或 0)则表示不限制;【虽然即使限制了,但超出也只是抛出警告,还是会正常注册该监听函数。抛警告是便于防止内存泄漏问题】;另外setMaxListeners跟defaultMaxListeners无关,setMaxListeners 修改了并不会更改 defaultMaxListeners ,简单来说就是2个属性名,set修改的是 _maxListeners 属性值,该属性有值时以 _maxListeners 为优先,没值则是

  4. emitter.defaultMaxListeners 返回默认监听最大数量,但好像没啥用,返回undefined,用getMaxListeners则能拿到官方说的10。
    官方说defaultMaxListeners不要更改!不然会影响所有实例。虽然我验证了下改了也没用,但官方说啥就是啥,你别改就完事了,而且改这个属性也是不规范的做法。

import { EventEmitter } from 'events';
export const emitter = new EventEmitter();console.log(emitter.defaultMaxListeners);// emitter.setMaxListeners(3)console.log(emitter.getMaxListeners());emitter.on('ceshi1',demo)emitter.on('ceshi1',demo)emitter.on('ceshi1',demo)emitter.on('ceshi1',demo)emitter.on('ceshi1',demo)emitter.on('ceshi1',demo)emitter.on('ceshi1',demo)emitter.on('ceshi1',demo)emitter.on('ceshi1',demo)emitter.on('ceshi1',demo)emitter.on('ceshi1',demo) // 默认10个,此时再注册则会报warn提醒你emitter.on('ceshi1',demo)

8、eventNames:返回事件总线里已注册了的所有监听器事件名(eventName)。

类型:eventNames(): Array<string | symbol>;

多次同名注册的也只返回一个eventName给数组。
查看某监听器事件名注册次数看下面的内容 9。


import { emitter } from '@/utils/events'
console.log(emitter.eventNames())

9、listenerCount:获取监听名为 eventName 的事件的监听器数量。

类型:listenerCount(eventName: string | symbol): number;

import { EventEmitter } from 'events';
export const emitter = new EventEmitter();emitter.on('ceshi1',demo)emitter.on('ceshi1',demo)emitter.on('ceshi1',demo)console.log(emitter.listenerCount('ceshi1')); // log: 3

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/677132.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

交易之路:从无知到有知的五个阶段

交易是易学的&#xff0c;它的操作很直观&#xff0c;也是复杂的&#xff0c;它的价格很玄妙。在金融行业日益壮大的背景下&#xff0c;新人辈出&#xff0c;而弱者则逐渐退出。市场生态在不断变化&#xff0c;我们每个人在交易之路上所经历的种种&#xff0c;既清晰可见又模糊…

Flask实现异步调用sqlalchemy的模型类

事情是这样的&#xff0c;我这边需要在一次请求里面&#xff0c;搞一个异步不阻碍的任务&#xff0c;来执行耗时的操作。 一开始&#xff0c;我准备写的代码是这样的&#xff1a; from flask import Flask import time from concurrent.futures import ThreadPoolExecutorexec…

基于opencv-python模板匹配的银行卡号识别(附源码)

目录 介绍 数字模板处理 银行卡图片处理 导入数字模板 模板匹配及结果 介绍 我们有若干个银行卡图片和一个数字模板图片&#xff0c;如下图 我们的目的就是通过对银行卡图片进行一系列图像操作使得我们可以用这个数字模板检测出银行卡号。 数字模板处理 首先我们先对数…

WPF DispatcherTimer用法

System.Windows.Threading.DispatcherTimer 类主要用于WPF应用程序中进行周期性任务调度&#xff0c;并且保证这些任务在UI线程上执行。 这对于需要更新界面或与UI元素交互的定时操作非常有用&#xff0c;因为WPF的所有UI操作都必须在主线程&#xff08;即Dispatcher线程&…

【开源】SpringBoot框架开发桃花峪滑雪场租赁系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 游客服务2.2 雪场管理 三、数据库设计3.1 教练表3.2 教练聘请表3.3 押金规则表3.4 器材表3.5 滑雪场表3.7 售票表3.8 器材损坏表 四、系统展示五、核心代码5.1 查询教练5.2 教练聘请5.3 查询滑雪场5.4 滑雪场预定5.5 新…

实践:微服务版本升级步骤以及maven仓库相关概念

进行微服务开发的时候&#xff0c;上层服务依赖于下层的服务的api&#xff0c;比如适配属于上层服务&#xff0c;用户属于下层服务。 例子: 上层服务 <!--订单管理微服务api依赖--> <dependency><groupId>com.jn.server</groupId><artifactId>…

One time pad 图像加密MATLAB程序

使用一次加密的形式对图像进行加密。 采用异或的方式实现。 加密、解密结果如下: 程序代码如下: % 读取原始图像并显示 originalImage = imread(lena256.bmp); % 更换为你的图像文件名 subplot(1,3,1),imshow(originalImage); title(Original Image);% 生成与图像相同大…

低代码市场的未来展望:趋势、机遇与挑战

根据 Zoho 的一项新研究&#xff0c;低代码市场正处于成为主流的风口浪尖。该报告对全球 800 多名 IT 和业务领导者进行了调查&#xff0c;确定了推动其采用的几个因素。其中最重要的是提高应用程序的开发速度。 这一发现对企业领导者来说应该不足为奇。 客户、合作伙伴和员工…

SQL持续更新中

问: 什么是SQL&#xff1f; 答: Structured Query Language 结构化查询语言&#xff1b;其实就是定义了操作所有关系型数据库的规则。每一种数据库操作的方式存在不一样的地方&#xff0c;称为 方言。 通用语法 SQL 语句可以单行或多行书写&#xff0c;以分号结尾。可使用空格…

2.7 Binance_interface APP 现货交易-限价单开仓

Binance_interface APP 现货交易-限价单开仓 Github地址PyTed量化交易研究院 目录 Binance_interface APP 现货交易-限价单开仓1. APP 现货交易-限价单开仓函数总览2. 模型实例化3. 同步 非堵塞 限价开仓&#xff08;购买&#xff09;4. 同步 堵塞 限价开仓&#xff08;购买&a…

linux进程(进程状态)

目录 前言&#xff1a; 正文&#xff1a; 1.R运行状态&#xff08;running&#xff09; 2.睡眠状态&#xff08;sleeping&#xff09; 3.D磁盘休眠状态&#xff08;Disk sleep&#xff09; 4停止状态&#xff08;stop&#xff09; 5僵尸状态&#xff08;Z&#xff09; …

从零开始学HCIA之NAT基本工作原理

1、NAT设计之初的目的是解决IP地址不足的问题&#xff0c;慢慢地其作用发展到隐藏内部地址、实现服务器负载均衡、完成端口地址转换等功能。 2、NAT完成将IP报文报头中的IP地址转换为另一个IP地址的过程&#xff0c;主要用于实现内部网络访问外部网络的功能。 3、NAT功能一般…

C#系列-C#访问FTP服务器实现上传下载(8)

FTP Server是什么&#xff1f; FTP Server&#xff08;File Transfer Protocol Server&#xff09;&#xff0c;即文件传输协议服务器&#xff0c;是在互联网上提供文件存储和访问服务的计算机。它依照FTP协议提供服务&#xff0c;专门用来传输文件。 FTP Server允许不同的客…

攻防世界 CTF Web方向 引导模式-难度1 —— 11-20题 wp精讲

PHP2 题目描述: 暂无 根据dirsearch的结果&#xff0c;只有index.php存在&#xff0c;里面也什么都没有 index.phps存在源码泄露&#xff0c;访问index.phps 由获取的代码可知&#xff0c;需要url解码(urldecode )后验证id为admin则通过 网页工具不能直接对字母进行url编码 …

SolidWorks学习笔记——入门知识2

目录 建出第一个模型 1、建立草图 2、选取中心线 3、草图绘制 4、拉伸 特征的显示与隐藏 改变特征名称 5、外观 6、渲染 建出第一个模型 1、建立草图 图1 建立草图 按需要选择基准面。 2、选取中心线 图2 选取中心线 3、草图绘制 以对称图形举例&#xff0c;先画出…

函数高级(C++)

师从黑马程序员 函数默认参数 在C中&#xff0c;函数的形参列表中的形参是可以有默认值的 语法&#xff1a;返回值类型 函数名 &#xff08;参数默认值 {}&#xff09; #include <iostream> using namespace std;//函数默认参数//如果我们自己传入数据&#xff0c;…

点云从入门到精通技术详解100篇-非结构化道路下无人平台路径规划与运动控制

目录 前言 路径规划方法研究现状 传统规划算法 智能规划算法 规划方法比较

vue 用的watch 的说明及例子

在 Vue.js 中&#xff0c;watch 是一个用于观察和响应 Vue 实例上数据变化的对象。当需要在数据变化时执行异步或开销较大的操作时&#xff0c;watch 是非常有用的。 说明 watch 对象包含一系列键值对&#xff0c;其中键是需要观察的响应式数据属性&#xff0c;值是一个处理函…

股票均线的使用方法和实战技术,看涨看空的均线形态与案例教学

一、教程描述 本套教程讲解了14种均线的特殊形态&#xff0c;通过直观图形以及大量案例的教学&#xff0c;将深奥、繁琐的均线变得生动与具体&#xff0c;广大投资者在认真学习以后&#xff0c;可以学会均线的使用方法&#xff0c;掌握最强的均线应用实战技术。本套教程不仅适…

[韩顺平]python笔记

AI工程师、运维工程师 python排名逐年上升&#xff0c;为什么&#xff1f; python对大数据分析、人工智能中关键的机器学习、深度学习都提供有力的支持Python支持最庞大的 代码库 &#xff0c;功能超强 数据分析&#xff1a;numpy/pandas/os 机器学习&#xff1a;tensorflow/…