Vue23全局事件总线
Vue2&3全局事件总线
Vue2全局事件总线

- 功能:可以解决所有组件之间通信传数据的问题
- 原理:通过一个共享对象,将所有组件全部绑定到对象上,即可通过这个对象实现组件与组件之间的传递数据,而这个共享对象叫做全局事件总线。
如何分清楚谁是发送方,谁是接收方?谁用绑定事件,谁用触发事件?
- 假设:我向你传送数据,我是发送方,你是接收方。
- 若我不向你发送数据,则你就不知道数据的内容,无法拿取(绑定)。(我不触发,你不能绑定,因为你没有数据)
- 只有我发送数据给你,你才能知道数据的内容,才能对数据进行拿取。(谁发送谁触发,谁拿取谁绑定)
共享对象创建位置:main.js文件
- 第一种方法:创建vc对象
// 获取 VueComponent 构造函数
const VueComponentConstructor = Vue.extend({})
// 创建 vc 对象
const vc = new VueComponentConstructor()
// 使所有组件共享 vc 对象
Vue.prototype.$bus = vc
- 第二种方法(常用):使用原有的vm对象
- 在Vue初始化时(beforeCreate),创建共享对象vm
new Vue({el : '#app',render: h => h(App),beforeCreate(){// this指向的是vmVue.prototype.$bus = this}
})
以上代码中出现的$bus有什么作用?
- $bus:事件总线,用来管理总线。
- 其他组件在调用vc共享对象时可通过
this.$bus.$on()和this.$bus.$emit()来绑定或触发事件
数据发送方:触发事件$emit
- 触发事件:
this.$bus.$emit('事件名', 接受的数据)
// Vip.vue
<template><div><button @click="triggerEvent">触发事件</button></div>
</template><script>export default {name : 'Vip',data(){return{name : 'zhangsan'}},methods : {triggerEvent(){this.$bus.$emit('event', this.name)}}}
</script>
数据接收方:绑定事件$on
- 绑定事件:
this.$bus.$on('事件名', 回调函数)
// App.vue
<template><div><Vip></Vip></div>
</template><script>import Vip from './components/Vip.vue'export default {name : 'App',mounted() {this.$bus.$on('event', this.test)},methods : {test(name){console.log(name);}},components : {Vip}}
</script>
Vue3全局事件总线
安装mitt
- 在CMD窗口中,跳转到Vue3安装路径下
- 输入命令
npm i mitt,当出现up to date in 595ms等类似信息表示安装成功
使用mitt(只要使用全局事件总线,所在的组件就要引入emitter)
- 第一步:创建一个文件夹utils,在文件夹中创建js文件(event-bus.js)
- 第二步:在js文件中导入并暴露mitt(如下)
- 这里的操作主要是为了生成对象emitter
// utils/event-bus.js
import mitt from 'mitt'// mitt函数的执行会生成一个对象:emitter对象
// emitter对象是一个全局事件总线对象
// 绑定和触发的操作都在这个对象上的完成
export default mitt()
实现绑定与触发事件
- 绑定事件:
emitter.on('事件名', 回调函数) - 触发事件:
emitter.emit('事件名', 接收的数据)
// App.vue
<template><Info></Info>
</template><script>// 引入全局事件总线对象import emitter from './utils/event-bus.js'import Info from './components/Info.vue'// 引入组合式API:生命周期钩子import { onMounted } from 'vue'export default {name : 'App',components : {Info},setup(){// 生命周期钩子:onMountedonMounted(() => {// 绑定事件emitter.on('event1', showInfo)})function showInfo(info){alert(`姓名:${info.name}`)}return {showInfo}}}
</script>
// Info.vue
<template><button @click="triggerEvent1">触发event1事件</button>
</template><script>// 导入全局事件总线对象import emitter from '../utils/event-bus.js'export default {name : 'Info',setup(){function triggerEvent1(){// 触发事件emitter.emit('event1', {name:'jack'})}return {triggerEvent1}}}
</script>
解绑事件
- 原理:在子组件中使用 off 可以消除指定的事件
- 解绑事件:
emitter.off('事件名')
// Info.vue
<template><button @click="triggerEvent1">触发event1事件</button><br><button @click="clearEvent1">解绑event1事件</button>
</template><script>// 引入入全局事件总线对象import emitter from '../utils/event-bus.js'export default {name : 'Info',setup(){function triggerEvent1(){// 触发全局事件总线上的事件emitter.emit('event1', {name:'jack'})}function clearEvent1(){// 解绑指定的事件emitter.off('event1')}return {triggerEvent1, clearEvent1}}}
</script>
Vue2和Vue3在触发和绑定上的不同
- 第一点:引用的方式不同
// Vue2 的 main.js
new Vue({el : '#app',render: h => h(App),beforeCreate(){Vue.prototype.$bus = this}
})// Vue3 的 utils/event-bus.js
import mitt from 'mitt'
export default mitt()
- 第二点:调用方式的不同
// Vue2
绑定:this.$bus.$on('事件名', 回调函数)
触发:this.$bus.$emit('事件名', 接受的数据)
解绑:this.$bus.$off('事件名')// Vue3 需要先引入 import emitter from '../utils/event-bus.js'
绑定:emitter.on('事件名', 回调函数)
触发:emitter.emit('事件名', 接收的数据)
解绑:emitter.off('事件名')
JavaScript
// Vue2
绑定:this.$bus.$on('事件名', 回调函数)
触发:this.$bus.$emit('事件名', 接受的数据)
解绑:this.$bus.$off('事件名')// Vue3 需要先引入 import emitter from '../utils/event-bus.js'
绑定:emitter.on('事件名', 回调函数)
触发:emitter.emit('事件名', 接收的数据)
解绑:emitter.off('事件名')
相关文章:
Vue23全局事件总线
Vue2&3全局事件总线 Vue2全局事件总线 功能:可以解决所有组件之间通信传数据的问题原理:通过一个共享对象,将所有组件全部绑定到对象上,即可通过这个对象实现组件与组件之间的传递数据,而这个共享对象叫做全局事件…...
GEM5 Garnet DVFS / NoC DVFS教程:ruby.clk_domain ruby.voltage_domain
简介 gem5中的 NoC部分是Garnet实现的,但是Garnet并没有单独的时钟域,而是保持ruby一致,要做noc的DVFS,便是要改ruby的 改电压 #这里只是生成一个随便变量名,存一下值。改是和频率一起的 userssaved_voltage_domain…...
java命令 jmap 堆参数分析
jmap -heap pid 展示pid的整体堆信息 bash-4.4# jmap -heap 10 Attaching to process ID 10, please wait... Debugger attached successfully. Server compiler detected. JVM version is 25.172-b11using thread-local object allocation. Garbage-First (G1) GC with 8 th…...
OpenCV C++ 图像处理实战 ——《OCR字符识别》
OpenCV C++ 图像处理实战 ——《OCR字符识别》 一、结果演示二、tesseract库配置2.1下载编译三、OCR字符识别3.1 文本检测方式3.1.1 RIL_BLOCK3.1.2 RIL_PARA3.1.3 RIL_TEXTLINE3.1.4 RIL_WORD3.1.5 RIL_SYMBOL3.2 英文文本检测3.3 中英文本检测四、源码测试图像下载总结一、结…...
在MySQL中创建新的数据库,可以使用命令,也可以通过MySQL工作台
摘要:在本教程中,你将学习如何使用MySQL CREATE DATABASE语句在MySQL数据库服务器上创建新数据库。 MySQL CREATE DATABASE语句简介 要在MySQL中创建新数据库,可以使用CREATE DATABASE语句。以下说明了CREATE DATABASE语句的基本语法: CREATE DATABASE [IF NOT EXISTS] …...
2311rust到31版本更新
1.27.1稳定版 在此修补程序前,下例在编译器内部恐慌. fn main() {let a vec!["".to_string()];a.iter().enumerate().take_while(|(_, &t)| false).collect::<Vec<_>>(); }1.27.1拒绝上述代码,并显示以下错误消息: error[E0507]: cannot move ou…...
【Python百宝箱】视觉算法秀:Python图像处理舞台上的巅峰对决
前言 在数字化时代,图像处理技术已经成为科技和计算机领域中不可或缺的一部分。从医学影像到计算机视觉,图像处理为我们提供了无限的可能性。Python作为一种灵活而强大的编程语言,在图像处理领域表现出色,拥有丰富的库和工具。本…...
Flutter 中在单个屏幕上实现多个列表
今天,我将提供一个实际的示例,演示如何在单个页面上实现多个列表,这些列表可以水平排列、网格格式、垂直排列,甚至是这些常用布局的组合。 下面是要做的: 实现 让我们从创建一个包含产品所有属性的产品模型开始。 …...
YOLOv8 加持 MobileNetv3,目标检测新篇章
🗝️YOLOv8实战宝典--星级指南:从入门到精通,您不可错过的技巧 -- 聚焦于YOLO的 最新版本, 对颈部网络改进、添加局部注意力、增加检测头部,实测涨点 💡 深入浅出YOLOv8:我的专业笔记与技术总结 -- YOLOv8轻松上手, 适用技术小白,文章代码齐全,仅需 …...
.gitignore 文件——如何在 Git 中忽略文件和文件夹详细教程
文章目录 什么是 .gitignore 文件?.gitignore 文件是用来做什么的?如何创建一个 .gitignore 文件?在 .gitignore 文件中应包括什么?如何在 Git 中忽略一个文件和文件夹如何忽略以前提交的文件 什么是 .gitignore 文件?…...
【数据结构(二)】单链表(3)
文章目录 1. 链表介绍2. 单链表应用实例2.1. 顺序添加方式2.1.1. 思路分析2.1.2. 代码实现 2.2. 按照编号顺序添加方式2.2.1. 思路分析2.2.2. 代码实现 3. 单链表节点的修改3.1. 思路分析3.2. 代码实现 4. 单链表节点的删除4.1. 思路分析4.2. 代码实现 5. 单链表常见面试题5.1.…...
创新案例|云服务平台HashiCorp是如何构建开源社区实现B2B增长飞轮
社区文化是HashiCorp企业文化的重要组成部分。虽然众多公司声称自己是社区驱动,但实际付诸行动的很少。与众不同的是,HashiCorp从一开始就将社区视为战略方针的核心,这也影响和塑造了公司今天的发展方向。社区不仅是执行策略之一,…...
2024年软件测试面试必看系列,看完去面试你会感谢我的!!
朋友圈点赞的测试用例 功能测试 1点赞后是否显示结果 2.点赞后是否可以取消; 3.点赞取消后是否可以重复点赞; 4.共同好友点赞后,是否有消息提醒; 5.非共同好友点赞后,是否有消息提醒; 6.点击点赞人昵称,是否可以跳转到他/她的主页; 7.自己能…...
01ctfer 文件上传
01ctfer 文件上传 启动靶场 访问该地址 代码审计 <?php header("Content-Type:text/html; charsetutf-8"); // 每5分钟会清除一次目录下上传的文件 require_once(pclzip.lib.php);if(!$_FILES){echo <!DOCTYPE html> <html lang"zh">…...
2.2 调用星火大模型的API
调用星火大模型的API 1 申请API调用权限:2 调用原生星火 API3 统一API调用方式 项目仓库地址:https://github.com/datawhalechina/llm-universe 讯飞星火认知大模型,由科大讯飞于2023年5月推出的中文大模型,也是国内大模型的代表…...
云原生是整个信息化行业的未来,一文彻底搞懂云原生
云原生这个词来自英语的Cloud Native的翻译,云原生是已经存多年在术语,真正开始获得关注的是在2015年到2016年。 这归因于这几年逐渐发布的Docker的兴起。 会有越来越多的企业和组织开始关注到它,并把他们的工作负载运行在云端的益处。无论是…...
【Redis】RedisTemplate最全的常用方法
文章目录 前言1.RedisTemplate常用方法2.String类型3.Hash类型4.List类型5.Set类型6.zSet类型 前言 RedisTemplate常用方法String类型Hash类型List类型Set类型zSet类型 Redis常用的数据类型:String、Hash、List、Set、zSet 1.RedisTemplate常用方法 redisTempla…...
图像倾斜角度求取-Radon变换
Radon算法 Radon(拉东)算法是一种通过定方向投影叠加,找到最大投影值时角度,从而确定图像倾斜角度的算法。具体过程如图所示 图1 Radon变换算法 Radon计算示例 对于纹理方向明显的图像,如图2所示,可以通…...
如何在本地搭建Oracle数据库实现公网环境下通过PLSQL工具进行远程访问
文章目录 前言1. 数据库搭建2. 内网穿透2.1 安装cpolar内网穿透2.2 创建隧道映射 3. 公网远程访问4. 配置固定TCP端口地址4.1 保留一个固定的公网TCP端口地址4.2 配置固定公网TCP端口地址4.3 测试使用固定TCP端口地址远程Oracle 前言 Oracle,是甲骨文公司的一款关系…...
时序预测 | Python实现ConvLSTM卷积长短期记忆神经网络股票价格预测(Conv1D-LSTM)
时序预测 | Python实现ConvLSTM卷积长短期记忆神经网络股票价格预测(Conv1D-LSTM) 目录 时序预测 | Python实现ConvLSTM卷积长短期记忆神经网络股票价格预测(Conv1D-LSTM)预测效果基本介绍程序设计参考资料预测效果 基本介绍 时序预测 | Python实现ConvLSTM卷积长短期记忆神…...
第19节 Node.js Express 框架
Express 是一个为Node.js设计的web开发框架,它基于nodejs平台。 Express 简介 Express是一个简洁而灵活的node.js Web应用框架, 提供了一系列强大特性帮助你创建各种Web应用,和丰富的HTTP工具。 使用Express可以快速地搭建一个完整功能的网站。 Expre…...
基于FPGA的PID算法学习———实现PID比例控制算法
基于FPGA的PID算法学习 前言一、PID算法分析二、PID仿真分析1. PID代码2.PI代码3.P代码4.顶层5.测试文件6.仿真波形 总结 前言 学习内容:参考网站: PID算法控制 PID即:Proportional(比例)、Integral(积分&…...
Prompt Tuning、P-Tuning、Prefix Tuning的区别
一、Prompt Tuning、P-Tuning、Prefix Tuning的区别 1. Prompt Tuning(提示调优) 核心思想:固定预训练模型参数,仅学习额外的连续提示向量(通常是嵌入层的一部分)。实现方式:在输入文本前添加可训练的连续向量(软提示),模型只更新这些提示参数。优势:参数量少(仅提…...
日语学习-日语知识点小记-构建基础-JLPT-N4阶段(33):にする
日语学习-日语知识点小记-构建基础-JLPT-N4阶段(33):にする 1、前言(1)情况说明(2)工程师的信仰2、知识点(1) にする1,接续:名词+にする2,接续:疑问词+にする3,(A)は(B)にする。(2)復習:(1)复习句子(2)ために & ように(3)そう(4)にする3、…...
逻辑回归:给不确定性划界的分类大师
想象你是一名医生。面对患者的检查报告(肿瘤大小、血液指标),你需要做出一个**决定性判断**:恶性还是良性?这种“非黑即白”的抉择,正是**逻辑回归(Logistic Regression)** 的战场&a…...
java 实现excel文件转pdf | 无水印 | 无限制
文章目录 目录 文章目录 前言 1.项目远程仓库配置 2.pom文件引入相关依赖 3.代码破解 二、Excel转PDF 1.代码实现 2.Aspose.License.xml 授权文件 总结 前言 java处理excel转pdf一直没找到什么好用的免费jar包工具,自己手写的难度,恐怕高级程序员花费一年的事件,也…...
五年级数学知识边界总结思考-下册
目录 一、背景二、过程1.观察物体小学五年级下册“观察物体”知识点详解:由来、作用与意义**一、知识点核心内容****二、知识点的由来:从生活实践到数学抽象****三、知识的作用:解决实际问题的工具****四、学习的意义:培养核心素养…...
【单片机期末】单片机系统设计
主要内容:系统状态机,系统时基,系统需求分析,系统构建,系统状态流图 一、题目要求 二、绘制系统状态流图 题目:根据上述描述绘制系统状态流图,注明状态转移条件及方向。 三、利用定时器产生时…...
OPenCV CUDA模块图像处理-----对图像执行 均值漂移滤波(Mean Shift Filtering)函数meanShiftFiltering()
操作系统:ubuntu22.04 OpenCV版本:OpenCV4.9 IDE:Visual Studio Code 编程语言:C11 算法描述 在 GPU 上对图像执行 均值漂移滤波(Mean Shift Filtering),用于图像分割或平滑处理。 该函数将输入图像中的…...
Linux --进程控制
本文从以下五个方面来初步认识进程控制: 目录 进程创建 进程终止 进程等待 进程替换 模拟实现一个微型shell 进程创建 在Linux系统中我们可以在一个进程使用系统调用fork()来创建子进程,创建出来的进程就是子进程,原来的进程为父进程。…...
