vue3全局事务总线mitt

vue3中$on,$off 和 $once 实例方法已被移除,组件实例不再实现事件触发接口。可以使用Mitt库(其实就是发布订阅模式的设计)

安装

$ npm install --save mitt

内置方法

发布事件

mybus.emit('自定义事件名称','数据');

使用方法通过emit派发, on 方法添加事件,off 方法移除,clear 清空所有

新建mitt文件夹,index.ts

import mitt from 'mitt'type Event={name:string
}
const emitter = mitt<Event>();
export default  emitter

派发

const change=()=>{emitter.emit('name','dd')
}

获取

emitter.on('name',e=>{console.log(e)
})

 如果在setup中派送参数,需要写在onMounted

onMounted(()=>{emitter.emit('name','ii')
})//获取
emitter.on('name',e=>{console.log(e)
})

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

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

相关文章

python -- 实现路径的匹配,剔除掉指定路径,并保存路径

python – 实现路径的匹配&#xff0c;剔除掉指定路径&#xff0c;并保存路径 在处理nc数据时&#xff0c;由于部分数据在插值的过程中&#xff0c;存在过多的0值&#xff0c;使得在制作标签时该时刻的数据出现报错&#xff0c;但是对于一年的数据量来说&#xff0c;无关紧要&…

HTTP 协议

目录 ​编辑一、HTTP 协议是什么 二、抓包工具的使用 三、HTTP 请求 1、认识 URL 2、认识方法 3、认识请求 “报头” HOST &#xff1a; Content-Length 和 Content-Type​编辑 User-Agent Referer Cookie 四、HTTP 响应 1、认识状态码 2、通过 form 表单构造 H…

38、springboot为 spring mvc 提供的静态资源管理,覆盖和添加静态资源目录

springboot为 spring mvc 提供的静态资源管理 ★ Spring Boot为Spring MVC提供了默认的静态资源管理&#xff1a; ▲ 默认的四个静态资源目录&#xff1a; /META-INF/resources > /resources > /static > /public ▲ ResourceProperties.java类的源代码&#xff0…

iOS开发Swift-6-深色模式,类与对象,MVC模式,弹出框,闭包-趣味问答App

1.创建趣味问答App项目 2.创建一个问题文本&#xff0c;水平居中约束。 创建蓝、红两个按钮&#xff0c;放入Stack View中&#xff0c;给StackView水平居中约束&#xff0c;下边约束&#xff0c;设置两按钮间距为20. 设置进度条view与safe View关系为equal width。设置他们的比…

安装sentry-cli问题

安装sentry-cli问题 1 使用brew install sentry-cli 安装的时候 有时候会报 Error: Xcode alone is not sufficient on Monterey. 2 使用 curl -sL https://sentry.io/get-cli/ | sh 安装成功 Installed sentry-cli 2.20.5 Done! 查看 sentry-cli --version sentry-cli 2.20.…

设计模式—外观模式(Facade)

目录 一、什么是外观模式&#xff1f; 二、外观模式具有什么优点吗&#xff1f; 三、外观模式具有什么缺点呢&#xff1f; 四、什么时候使用外观模式&#xff1f; 五、代码展示 ①、股民炒股代码 ②、投资基金代码 ③外观模式 思维导图 一、什么是外观模式&#xff1f;…

vue3实现日历日期选择(不使用任何插件,纯javaScript实现)

个人项目地址&#xff1a; SubTopH前端开发个人站 &#xff08;自己开发的前端功能和UI组件&#xff0c;一些有趣的小功能&#xff0c;感兴趣的伙伴可以访问&#xff0c;欢迎提出更好的想法&#xff0c;私信沟通&#xff0c;网站属于静态页面&#xff09; SubTopH前端开发个人…

中东 Shopify 如何使用 Bytebase 构建一站式数据库开发工作流

公司简介 Salla 是一家 2016 年成立&#xff0c;位于沙特麦加的自建站电商平台。 作为中东 Shopify&#xff0c;其最大的特点是支持阿拉伯语建站&#xff0c;并且提供更多适应中东地区特点的本地化服务。截止目前&#xff0c;已有 47,000 家店铺入驻 Salla&#xff0c;商品销售…

【前端demo】将二进制数转换为十进制数 原生实现

https://github.com/florinpop17/app-ideas 总结 文章目录 效果JavaScript实现进制转换原生代码遇到的问题 效果 二进制转换为十进制若输入为空或不是二进制&#xff0c;提示清空 https://codepen.io/karshey/pen/dywXZYQ JavaScript实现进制转换 parseInt parseInt(111,…

虚拟交换缓存不足导致qt编译失败

qt pro make 失败&#xff1a; virtual memory exhausted: Cannot allocate memory Makefile:9155: recipe for target qrc_myimages.o failed make: *** [qrc_myimages.o] Error 1 make: *** Waiting for unfinished jobs....virtual memory exhausted: Cannot allocate memo…

数据仓库_维度表的两大分类

最近看一篇文章对维度表进行了分类&#xff0c;记录一下。 维度表主要分为两类高基数维度表和低基数维度表。 高基数维度数据 一般是用户资料表、商品资料表类似的资料表。数据量可能是千万级或者上亿级别。 低基数维度数据 一般是配置表&#xff0c;比如枚举值对应的中文含…

2309C++连接宏

枚 哈哈型{啊啊,哈哈};整 哈哈啊(整 i){中 2*i; } #define 新啊(i) \整 新##i(i##型 k){ \整 ji##啊(k);中 j; \}新啊(哈哈);空 主(){整 k新哈哈(啊啊);打印(k); }

图神经网络教程之GAT(pyG)

图神经网络-pyG-GAT 在上一章节介绍了pyG-GCN的使用&#xff0c;除了GCN&#xff0c;还有一些像GAT、GraphSage等等一些&#xff0c;本文将介绍GAT模型的构建 实现了一个使用Graph Attention Network&#xff08;GAT&#xff09;的节点分类模型&#xff0c;该模型在Cora数据集上…

《Kali渗透基础》15. WEB 渗透

kali渗透 1&#xff1a;WEB 技术1.1&#xff1a;WEB 攻击面1.2&#xff1a;HTTP 协议基础1.3&#xff1a;AJAX1.4&#xff1a;WEB Service 2&#xff1a;扫描工具2.1&#xff1a;HTTrack2.2&#xff1a;Nikto2.3&#xff1a;Skipfish2.4&#xff1a;Arachni2.5&#xff1a;OWAS…

前端面试必备 | uni-app 篇(P1-15)

文章目录 1. 请简述一下uni-app的定义和特点。2. uni-app兼容哪些前端框架&#xff1f;请列举几个。3. 请简述一下uni-app的跨平台工作原理。4. 什么是条件编译&#xff1f;在uni-app中如何实现条件编译&#xff1f;5. uni-app中的页面生命周期有哪些&#xff1f;请简要介绍。6…

UG\NX CAM二次开发 插入工序 UF_OPER_create

文章作者:代工 来源网站:NX CAM二次开发专栏 简介: UG\NX CAM二次开发 插入工序 UF_OPER_create 效果: 代码: void MyClass::do_it() {tag_t setup_tag=NULL_TAG;UF_SETUP_ask_setup(&setup_tag);if (setup_tag==NULL_TAG){uc1601("请先初始化加工环境…

flinkcdc同步完全量数据就不同步增量数据了

flinkcdc同步完全量数据就不同步增量数据了 使用flinkcdc同步mysql数据&#xff0c;使用的是全量采集模型 startupOptions(StartupOptions.earliest()) 全量阶段同步完成之后&#xff0c;发现并不开始同步增量数据&#xff0c;原因有以下两个&#xff1a; 原因1&#xff1a; …

WPF数据视图

将集合绑定到ItemsControl控件时&#xff0c;会不加通告的在后台创建数据视图——位于数据源和绑定的控件之间。数据视图是进入数据源的窗口&#xff0c;可以跟踪当前项&#xff0c;并且支持各种功能&#xff0c;如排序、过滤、分组。 这些功能和数据对象本身是相互独立的&…

【计算机网络】OSI 七层网络参考模型

OSI&#xff08;Open Systems Interconnection&#xff09;七层网络参考模型是一种用于描述计算机网络通信的框架&#xff0c;将网络通信划分为七个不同的层次&#xff0c;每个层次负责不同的功能。 以下为 OSI 七层网络参考模型的简单表格&#xff1a; --------------------…

maven的依赖下载不下来的几种解决方法

前言 每次部署测试环境&#xff0c;从代码库拉取代码&#xff0c;都会出现缺少包的情况。然后找开发一通调试&#xff0c;到处拷包。 方案一&#xff1a;pom文件注释/取消注释 注释掉pom.xml里的报红色的依赖&#xff08;同时可以把本地maven库repo里对应的包删除&#xff09;&…