vue 自定义事件总线类进行组件间通信

写一个eventBus.js:

export default class eventBus{constructor() {this.events = {};}on(eventName, callback) {if (typeof callback !== "function") {throw "请传入监听函数";}if (!this.events[eventName]) {this.events[eventName] = [];}this.events[eventName].push(callback);}emit(eventName, ...args) {if (this.events[eventName]) {this.events[eventName].forEach((cb) => {cb.call(this, ...args);});}}off(eventName, callback) {if (this.events[eventName]) {if (callback) {var index = this.events[eventName].indexOf(callback);if (index > -1) {this.events[eventName].splice(index, 1);}} else {this.events[eventName].length = 0;}}}
}

main.js引入eventBus ,全局挂载$Bus实例:

import eventBus from "@/utils/eventBus";
Vue.prototype.$Bus= new eventBus();

vue组件内使用示例:

//监听事件
this.$Bus.on("pageA/upload", () => {this.show = true;
});
//触发事件
this.$Bus.emit("pageA/upload", true);
//卸载事件
this.$Bus.off("pageA/upload");

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

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

相关文章

Docker基础篇之入门使用

文章目录 1. Docker的基本组成2. Docker平台架构3. 阿里云镜像加速4. Docker的Hello World入门案例5. 总结 1. Docker的基本组成 Docker的基本组成主要是有四部分,分别是镜像、容器和仓库。 镜像:Docker镜像就是一个只读的模版,镜像可以用来…

【Spring】深入理解 Spring 状态机:简化复杂业务逻辑的利器

前言 在软件开发中,有许多场景需要处理状态转换和状态驱动的逻辑,比如订单处理、工作流程管理、游戏引擎等。Spring 状态机(Spring State Machine)是 Spring Framework 提供的一个强大的模块,用于帮助开发人员轻松构建…

二叉搜索树BST ——(C++)

本篇将会讲解有关二叉树的搜索原理,以及关于二叉搜索树的建立,以及二叉树搜索树的插入、删除和查找等基本操作。最后我们还会对二叉搜索树进行功能扩展,介绍有关搜索二叉树的 K 模型和 KV 模型。目录如下: 目录 1. 搜索二叉树 二叉…

前端学习CSS-2

盒子模型 盒子模型相关属性 一些盒子模型的样式示例 传统网页布局方式 浮动 浮动的三大特性 脱标:脱离标准流一行显示,顶部对齐具备行内块元素特性 定位

Java整合EasyExcel实战——1

参考&#xff1a;读Excel | Easy Excel快速使用easyexcel的来完成excel的读取https://easyexcel.opensource.alibaba.com/docs/current/quickstart/read 准备条件 依赖 <dependency><groupId>com.alibaba</groupId><artifactId>easyexcel</artifa…

Android 动效整理

Android自定义SeekBar&#xff0c;滑动时弹出气泡指示器显示进度 安卓开发中非常炫的效果集合_android 开发 向右上角收起炫酷动态效果-CSDN博客 https://github.com/shenghuntianlang/Android-Views?tabreadme-ov-file#decentbanner 以前收藏了很多文章&#xff0c;但是过…

【UE5.1 角色练习】08-传送技能

前言 在上一篇&#xff08;【UE5.1 角色练习】07-AOE技能&#xff09;基础上继续实现人物通过鼠标点击然后传送技能的功能。 效果 步骤 1. 首先需要显示鼠标光标&#xff0c;我们可以在玩家控制器中勾选“显示鼠标光标” 2. 在项目设置中添加一个操作映射&#xff0c;设置按…

Python爬虫入门实例:Python7个爬虫小案例(附源码)

引言 随着互联网的快速发展&#xff0c;数据成为了新时代的石油。Python作为一种高效、易学的编程语言&#xff0c;在数据采集领域有着广泛的应用。本文将详细讲解Python爬虫的原理、常用库以及实战案例&#xff0c;帮助读者掌握爬虫技能。 一、爬虫原理 爬虫&#xff0c;又…

Vue3.0 里为什么要用 Proxy API替代 defineProperty API?

Vue3.0选择使用Proxy API替代defineProperty API的原因主要有以下几点&#xff1a; 性能提升&#xff1a; Proxy API允许拦截整个对象&#xff0c;而defineProperty API需要遍历对象的每个属性进行拦截。因此&#xff0c;Proxy API在捕获对象的访问和修改时更为高效。 更全面的…

maptr(2):论文及代码解读

文章目录 1. 介绍2. 模型架构2.1 GT 数据制作2.2 模型架构2.3 GKT2.3.1 cross attn 的变化2.3.1 GKT2.4 decoder部分2.5 header2.5.1 reg_branch2.5.2 cls_branch3. Loss计算3.1 正负样本匹配3.2 loss计算<

2024年上半年信息系统项目管理师下午真题及答案(第二批)

试题一 某项目计划工期为10个月&#xff0c;预算210万元&#xff0c;第7个月结束时&#xff0c;项目经理进行了绩效评估&#xff0c;发现实际完成了总计划进度的70%。项目的实际数据如表所示&#xff1a; 单击下面头像图片领取更多软考独家资料

企业内部通讯软件—WorkPlus适配信创即时通讯软件

在现代企业中&#xff0c;良好的内部通讯是保持高效工作和顺利运营的关键。企业内部通讯软件的选择对于提升沟通效率、促进团队合作、保障数据安全和隐私保护至关重要。本文将介绍企业内部通讯软件的重要性探讨一些常用的软件&#xff0c;帮助企业做出明智的选择。 一、企业内…

深度融合大语言模型与知识图谱:思通数科企业知识库智能问答系统的创新实践

摘要 在知识经济时代&#xff0c;企业知识管理的重要性日益凸显。本文深入探讨了思通数科如何利用大语言模型和知识图谱技术&#xff0c;构建企业知识库智能问答系统&#xff0c;以促进知识的高效获取、共享、应用和创新&#xff0c;从而提升企业的知识管理水平和业务价值。 1…

钕铁硼表面磷化处理

大家都知道烧结钕铁硼易氧化、易腐蚀&#xff0c;日久将造成磁性能的衰减甚至丧失&#xff0c;所以使用前必须进行严格的防腐处理。在之前的文章中已经向大家介绍过与烧结钕铁硼表面处理相关的知识和电镀的工艺流程&#xff0c;除了电镀之外&#xff0c;钕铁硼表面处理还可采用…

Reids高频面试题汇总总结

一、Redis基础 Redis是什么? Redis是一个开源的内存数据存储系统,它可以用作数据库、缓存和消息中间件。Redis支持多种数据结构,如字符串、哈希表、列表、集合、有序集合等,并提供了丰富的操作命令来操作这些数据结构。Redis的主要特点是什么? 高性能:Redis将数据存储在内…

大数据开发面试题【ClickHouse篇】

170、clickhouse介绍以及架构 clickhouse一个分布式列式存储数据库&#xff0c;主要用于在线分析查询 171、列式存储和行式存储有什么区别&#xff1f; 行式存储&#xff1a; 1、数据是按行存储的 2、没有建立索引的查询消耗很大的IO 3、建立索引和视图花费一定的物理空间和…

查看Mongo是否正在备份?

要查看MongoDB是否正在备份&#xff0c;可以通过以下几种方法&#xff1a; 查看MongoDB的进程列表&#xff1a; 使用命令ps -ef | grep mongo&#xff0c;这将列出所有正在运行的MongoDB进程。在输出的列表中&#xff0c;你可以查看是否有与备份相关的进程或任务正在运行。 查…

rapidssl通配符证书低至600元一年

RapidSSL是Geotrust旗下的子品牌&#xff0c;主要经营的是入门级的SSL数字证书。RapidSSL旗下的SSL证书产品不多&#xff0c;只有DV基础型单域名SSL证书和通配符SSL证书&#xff0c;不过这两款SSL证书满足了大多数网站的需求。今天就随SSL盾小编了解RapidSSL旗下的通配符SSL证书…