当前位置: 首页 > news >正文

EventEmitter3在vue中的使用

前提

vue中的组件传递方式有很多,包括父子组件之间的传值(props,emit)、事件总线($ bus)、状态管理模式(vuex,pinia),现在推荐一种可以替代$bus的一种传值方式——eventemitter3


安装

npm i eventemitter3 --save 

使用

在utils目录下新增 event.js文件
event.js

import EventEmitter from 'eventemitter3'export default new EventEmitter()

在需要传递消息的组件中使用
**.vue

...
import event from '@/mixins/event.js'...
created () {event.emit('getList', 'hello world')
},
destoryed () {event.removeListener('getList');
}

注:在页面进行跳转的时候,要进行事件的解绑

在接收的组件中使用
**.vue

...
import event from '@/mixins/event.js'...
created () {event.on('GetTitle', (e) => {console.log('-------------------', e)})
}

总结

eventBus和EventEmiiter的区别

eventBus 的使用范围更加广泛,可以跨越不同组件和模块之间进行信息通信传递,它是一个全局概念的事件总线。通常作为一个单例对象存在,因此往往需要创建一个中央管理器的实例
EventEmitter 是一个基于类的模块,用于在单个组件或模块内部实现事件的发布和订阅。所以它可以在需要的地方创建实例对象,并将其用于内部事件的发布和订阅

相关文章:

EventEmitter3在vue中的使用

前提 vue中的组件传递方式有很多,包括父子组件之间的传值(props,emit)、事件总线($ bus)、状态管理模式(vuex,pinia),现在推荐一种可以替代$bus的一种传值方…...

双剑合璧:基于Elasticsearch的两路召回语义检索系统,实现关键字与语义的高效精准匹配

搜索推荐系统专栏简介:搜索推荐全流程讲解(召回粗排精排重排混排)、系统架构、常见问题、算法项目实战总结、技术细节以及项目实战(含码源) 专栏详细介绍:搜索推荐系统专栏简介:搜索推荐全流程讲解(召回粗排精排重排混排)、系统架构、常见问题、算法项目实战总结、技术…...

LeetCode34-34. 在排序数组中查找元素的第一个和最后一个位置

&#x1f517;:代码随想录:二分查找的算法讲解:有关left<right和left<right的区别 class Solution {public int[] searchRange(int[] nums, int target) {int nnums.length;int l0,hn-1;if(numsnull){return null; }if(n0){return new int[]{-1,-1}; }if(target&l…...

ddrnet 分割学习笔记

目录 修改后可以加载预训练: 训练自己的数据代码: 默认分割后特征下采样8倍,最后用上采样恢复到原图; 修改后可以加载预训练: import math import torch import numpy as np import torch.nn as nn import torch.nn.functional as F from torch.nn import init from …...

Outlook关闭过去事件的提醒

Outlook关闭过去事件的提醒 故障现象 最近Outlook中推出的新功能让我们可以选择自动关闭过去事件的提醒。 目前这个功能暂时只向当月通道的Office 365 订阅者发布。 这些用户升级到1810版本后&#xff0c;可以在不想收到已发生事件提醒的时候通过下面的步骤自动忽略过去事件…...

git 简单入门

git init touch test.txt git add test.txt git commit -m 初始化 仓库 git log //查找日志 git checkout -b dev //创建并切换dev分支 git branch // 查找分支 此时有master 和 dev分支&#xff0c; 此时在dev分支 dev分支也有test.txt文件 vim test.txt //写入dev …...

只有开源才能拯救AI

导语 | 随着 AI 技术的蓬勃发展&#xff0c;大模型的开源化正成为人工智能领域的新潮流&#xff0c;但同时引发的伦理和安全风险也饱受大家关注&#xff0c;如何把握平衡其中的尺度成为开源的一大难题。我们又应该如何有效进行开源治理&#xff1f;未来将走向何方&#xff1f;今…...

在Spring Boot中使用进程内缓存和Cache注解

在Spring Boot中使用内缓存的时候需要预先知道什么是内缓存&#xff0c;使用内缓存的好处。 什么是内缓存 内缓存&#xff08;也称为进程内缓存或本地缓存&#xff09;是指将数据存储在应用程序的内存中&#xff0c;以便在需要时快速访问和检索数据&#xff0c;而无需每次都从…...

YOLOv5项目实战(3)— 如何批量命名数据集中的图片

前言:Hello大家好,我是小哥谈。本节课就教大家如何去批量命名数据集中的图片,希望大家学习之后可以有所收获!~🌈 前期回顾: YOLOv5项目实战(1)— 如何去训练模型 YOLOv5项目实战(2࿰...

React + hooks + Ts 实现将后端响应的文件流(如Pdf)输出到浏览器下载

React 篇 一些关于react 学习与总结 这篇是记录开发中关于实现将后端响应的文件流&#xff08;如Pdf&#xff09;输出到浏览器下载&#xff0c;基于React Hooks Ts。 开发场景&#xff1a; 实现将后端响应的文件流&#xff08;如Pdf&#xff09;输出到浏览器下载&#xff0c;…...

大数据基础设施搭建 - JDK

一、创建目录 需要在root账号下操作&#xff0c;因为/目录下只能用root账号创建目录 1.1 创建目录 [roothadoop102 ~]# mkdir /opt/software/ [roothadoop102 ~]# mkdir /opt/module/1.2 修改权限 修改module、software文件夹的所有者和所属组均为hadoop用户&#xff0c;远程使…...

从0到0.01入门React | 010.精选 React 面试题

🤍 前端开发工程师(主业)、技术博主(副业)、已过CET6 🍨 阿珊和她的猫_CSDN个人主页 🕠 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 🍚 蓝桥云课签约作者、已在蓝桥云课上架的前后端实战课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入…...

Docker启动SRS流媒体服务器

一、安装Docker 1.1、下载windows桌面版Windows 1.2、配置镜像 镜像加速器镜像加速器地址Docker 中国官方镜像https://registry.docker-cn.comDaoCloud 镜像站http://f1361db2.m.daocloud.ioAzure 中国镜像https://dockerhub.azk8s.cn科大镜像站https://docker.mirrors.ustc…...

php+MySQL防止sql注入

1、使用预处理语句&#xff08;Prepared Statements&#xff09;&#xff1a;预处理语句能够防止攻击者利用用户输入来篡改SQL语句&#xff0c;同时也能提高执行效率。通过将用户的输入参数与SQL语句分离&#xff0c;确保参数以安全的方式传递给数据库引擎&#xff0c;避免拼接…...

git 删除远程非主分支

git删除远程分支问题及git批量删除已合并的远程分支 - joshua317的博客 git push origin --delete branch-name 本版本Gitlab没有设置按钮&#xff0c;所以不能在网页上删除项目。但是可以在本地使用上述命令来删除远程仓库中非主分支的分支。 测试过不论在哪个分支操作都可…...

【MySQL学习】C++外部调用

#include "mysql.h" MYSQL *mysql; MYSQL_RES *rec; MYSQL_ROW row; &#xff08;1&#xff09;连接 char *server "localhost"; char *user "root"; char *password "hello"; char *database "mysql"; mysql mysql_i…...

Backblaze 2023 Q3硬盘故障质量报告解读

作为一家在2021年在美国纳斯达克上市的云端备份公司&#xff0c;Backblaze一直保持着对外定期发布HDD和SSD的故障率稳定性质量报告&#xff0c;给大家提供了一份真实应用场景下的稳定性分析参考数据。2023年度之前发布的两次报告&#xff0c;请参考&#xff1a; Backblaze发布2…...

docker安装elasticsearch,elasticsearch-head

安装elasticsearch 1、执行命令&#xff1a;docker pull elasticsearch:8.11.1 2、执行命令&#xff1a;docker run --name elastic -p 9200:9200 -p 9300:9300 -e "discovery.typesingle-node" -d elasticsearch:8.11.1 3、执行命令&#xff1a;docker exec -it …...

rabbitmq 集群搭建

RabbitMQ集群介绍 RabbitMQ集群是一组RabbitMQ节点&#xff08;broker&#xff09;的集合&#xff0c;它们一起工作以提供高可用性和可伸缩性服务。 RabbitMQ集群中的节点可以在同一物理服务器或不同的物理服务器上运行。 RabbitMQ集群的工作原理是&#xff0c;每个节点在一个…...

【云原生-Kurbernets篇】Kurbernets集群的调度策略

调度 一、Kurbernetes的list-watch机制1.1 list-watch机制简介1.2 创建pod的流程&#xff08;结合list-watch机制&#xff09; 二、Scheduler的调度策略2.1 简介2.2 预选策略&#xff08;predicate&#xff09;2.3 优选策略&#xff08;priorities&#xff09; 三、标签管理3.1…...

Clawdbot惊艳效果:Qwen3-32B在医疗问诊摘要与术语标准化输出实测

Clawdbot惊艳效果&#xff1a;Qwen3-32B在医疗问诊摘要与术语标准化输出实测 1. 测试背景与平台介绍 Clawdbot是一个统一的AI代理网关与管理平台&#xff0c;为开发者提供直观的界面来构建、部署和监控自主AI代理。这个平台集成了聊天界面、多模型支持和强大的扩展系统&#…...

【Java 21记录模式性能优化终极指南】:3个被90%开发者忽略的模式匹配陷阱及提速300%的实战方案

第一章&#xff1a;Java 21记录模式性能优化全景概览Java 21 引入的记录模式&#xff08;Record Patterns&#xff09;不仅提升了模式匹配的表达力&#xff0c;更在JVM层面实现了多项关键性能优化。通过与模式匹配&#xff08;Pattern Matching for instanceof&#xff09;和解…...

万象视界灵坛惊艳效果展示:同一张宠物图在‘金毛犬’‘幼犬’‘户外玩耍’‘毛发蓬松’多维排序

万象视界灵坛惊艳效果展示&#xff1a;同一张宠物图在"金毛犬""幼犬""户外玩耍""毛发蓬松"多维排序 1. 效果展示开场 今天我要向大家展示万象视界灵坛这个神奇工具的实际效果。它就像一个视觉魔法师&#xff0c;能够深入理解图片中的…...

3分钟搞定Windows和Office激活:KMS_VL_ALL_AIO智能脚本使用指南

3分钟搞定Windows和Office激活&#xff1a;KMS_VL_ALL_AIO智能脚本使用指南 【免费下载链接】KMS_VL_ALL_AIO Smart Activation Script 项目地址: https://gitcode.com/gh_mirrors/km/KMS_VL_ALL_AIO 还在为系统激活烦恼吗&#xff1f;Windows提示许可证过期&#xff0c…...

别再只盯着细胞比例了!用Xenium数据做小鼠肺腺癌空间邻域分析,手把手教你找到真正的肿瘤边界

空间邻域分析&#xff1a;重新定义肿瘤微环境的生物学边界 在单细胞和空间组学研究中&#xff0c;我们常常陷入一个思维定式——过度关注细胞类型的比例变化&#xff0c;却忽略了细胞在三维空间中的精妙排布所蕴含的关键信息。这种比例优先的思维模式&#xff0c;就像试图通过统…...

Linux 内核中的信号处理:从发送到捕获

Linux 内核中的信号处理&#xff1a;从发送到捕获 引言 作为一名深耕操作系统和嵌入式开发的工程师&#xff0c;我深知通知机制的重要性。在系统开发中&#xff0c;及时的通知可以帮助系统快速响应事件。在 Linux 内核中&#xff0c;信号是一种重要的进程间通信机制&#xff0c…...

4个硬核特性解决开发者存储管理难题

4个硬核特性解决开发者存储管理难题 【免费下载链接】czkawka Multi functional app to find duplicates, empty folders, similar images etc. 项目地址: https://gitcode.com/GitHub_Trending/cz/czkawka 一、存储困境诊断&#xff1a;开发者面临的四大存储挑战 识别…...

如何用快马平台为网站开发公司快速生成企业官网原型,提升方案演示效率

作为一名经常需要快速响应客户需求的网站开发者&#xff0c;我最近发现了一个能大幅提升工作效率的好方法 - 使用InsCode(快马)平台来生成企业官网原型。这个方法特别适合像我们华网三百每年.cn这样需要快速为客户提供方案演示的网站开发公司。 需求分析阶段 当接到一个新客户…...

保姆级教程:用Cadence Sigrity Power DC为海思HI3516A板卡提取电源树(附常见报错处理)

从零掌握Cadence Sigrity Power DC电源树提取&#xff1a;HI3516A实战避坑指南 刚拿到海思HI3516A评估板时&#xff0c;电源网络分析往往是硬件工程师的第一个拦路虎。面对密密麻麻的PCB走线和数十个电源域&#xff0c;传统手动梳理方式不仅耗时费力&#xff0c;还容易遗漏关键…...

Transformer位置编码避坑指南:手把手教你用RoPE解决长文本外推难题(附Torch复现)

Transformer长文本处理实战&#xff1a;RoPE位置编码的工程化解决方案 在构建现代NLP系统时&#xff0c;处理长文本序列一直是Transformer架构面临的重大挑战。当序列长度超过模型预训练时的最大位置编码范围时&#xff0c;传统方法的性能会显著下降。这种现象在构建聊天机器人…...