学习Vue全局事件总线总结

今天学习了Vue的全局事件总线和消息订阅与发布,它们两个都是为了实现任意组件之间的通信,全局事件总线是利用了Vue的一个重要的内置关系,就是组件构造函数原型的对象原型指向的是Vue原型,知道这个重要的指向之后,我们通过给Vue实例对象身上添加一个组件可以使用的Vue原型,这样new出来的组件实例对象就可以通用原型链找到我们给它添加的Vue原型,为什么要这样添加呢,因为从控制台中打印Vue实例对象的this身上有$on、$emit、$off的方法,从而得知只要组件拥有Vue原型就可以使用这些方法了,而消息订阅与发布是使用第三方库去实现组件之间的通信。

使用全局组件总线具体的步骤,首先第一步是安装全局事件总线,需要到main.js文件中的Vue实例对象中给Vue实例对象添加一个名为$bus(这个可以自定义,但bus有总线的意思所以习惯使用bus这个单词)

new Vue({......beforeCreate(){Vue.prototype.$bus = this //安装全局事件总线,$bus就是当前应用的vm
}......
})

第二步就是使用事件总线,这里需要两个组件之间来进行才能接收数据,接收数据:A组件想接收数据,则在A组件中给$bus绑定自定义事件,事件的回调留在A组件自身。

// A组件
methods:{demo(data){......}
}
......
mounted(){this.$bus.$on('xxx',this.demo)
}

接下来就是提供数据的组件:

// B组件
this.$bus.$emit('xxx',传给A的数据)

最后为了避免占有资源,组件删除了但绑定的事件还没有删除,所以在我们最好在销毁组件的deforeDestroy钩子中,用$off去解绑当前组件所用到的事件。

还有一种组件组件间通信的方式是通过消息订阅与发布(pubsub),这里需要使用到第三方库,但能实现这个功能的第三方库非常多,它们的语法也略有不同,但这里就使用 pubsub-js这个第三方库来举例子。

第一步首先是安装第pubsub-js三方库,在cmd控制台输入npm i pubsub-js命令进行下载。

第二步需要在订阅和发布的两个组件中去引入pubsub-js库。

import pubsub from 'pubsub-js'

第三步接收数据在接收组件中配置好:A组件想要接收数据,则在A组件中订阅消息,订阅的回调留在A组件自身。

// A组件
methods(){demo(data){......}
}
......
mounted(){this.pid = pubsub.subscribe('xxx',this.demo) //订阅消息
}

第四步在提供数据组件中去触发在A组件配置好的事件名xxx。

pubsub.publish('xxx',传给A的数据)

同样为了删除组件之后事件占用资源的问题,最好在beforeDestroy钩子中,使用pubsub提供的删除方法:PubSub.unsubscribe(pid)去取消订阅。

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

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

相关文章

经典目标检测YOLO系列(一)复现YOLOV1(5)模型的训练及验证

经典目标检测YOLO系列(一)复现YOLOV1(5)模型的训练及验证 之前,我们依据《YOLO目标检测》(ISBN:9787115627094)一书,提出了新的YOLOV1架构,继续按照此书进行YOLOV1的复现。 经典目标检测YOLO系列(一)YOLOV1的复现(1)总体架构 经典目标检测Y…

uni微信小程序强制用户更新版本

强制更新的代码参考官方文档 uni.getUpdateManager() | uni-app官网 我这边的如下: //检查版本更新const updateManager uni.getUpdateManager();updateManager.onCheckForUpdate(function (res) {// 请求完新版本信息的回调console.log(res.hasUpdate, "是…

【深度学习目标检测】十三、基于深度学习的血细胞识别(python,目标检测,yolov8)

血细胞计数是医学上一种重要的检测手段,用于评估患者的健康状况,诊断疾病,以及监测治疗效果。而目标检测是一种计算机视觉技术,用于在图像中识别和定位特定的目标。在血细胞计数中,目标检测技术可以发挥重要作用。 首先…

2023年全国职业院校技能大赛(高职组)“云计算应用”赛项赛卷⑨

2023年全国职业院校技能大赛(高职组) “云计算应用”赛项赛卷9 目录 需要竞赛软件包环境以及备赛资源可私信博主!!! 2023年全国职业院校技能大赛(高职组) “云计算应用”赛项赛卷9 模块一 …

Kubernetes/k8s的存储卷/数据卷

k8s的存储卷/数据卷 容器内的目录和宿主机的目录挂载 容器在系统上的生命周期是短暂的,delete,k8s用控制创建的pod,delete相当于重启,容器的状态也会回复到初始状态 一旦回到初始状态,所有的后天编辑的文件都会消失…

做了运维总监才懂专业运维团队的重要性

信息系统的生命周期涵盖:设计、开发、测试、部署上线、运行维护。其中,运行维护阶段是信息系统生命周期中的关键环节,其执行效果直接影响系统是否能达到预期的运行目标。 为了实现这个目标,我们必须建立一个以业务服务为导向的专…

Openharmony 对应Android内存查看

众所周知&#xff0c;内存查看是一个很重要的部分&#xff0c;大多数情况&#xff0c;我们都是使用dumpsys的方法对android的内存进行查看&#xff0c;但是对于openharmony而言好像又不太一样了。 Android内存查看 命令行&#xff1a; adb shell dumpsys meminfo <packag…

Java零基础教学文档第四篇:HTML_CSS_JavaScript(1)

今日新篇章 【CSS】 【主要内容】 CSS简介 CSS基础语法 CSS选择器 CSS常用属性 CSS元素分类 CSS定位 【学习目标】 1.CSS的简介 1.1 CSS定义与解释** CSS是Cascading Style Sheets&#xff08;层叠样式表单&#xff09;的简称&#xff0c;CSS就是一种叫做样式表&…

K8S--- kubectl auth

该命令可以校验用户或者serviceaccount是否有对应的权限 [root@yyzc-zjjcs01 ~]# /opt/kubernetes/bin/kubectl --kubeconfig /opt/kubernetes/conf/default-admin.kubeconfig auth --help Inspect authorization Available Commands: can-i Check whether an action is allowe…

jQuery —— ajaxForm和ajaxSubmit的用法与区别

ajaxSubmit 这个可以理解为ajaxForm了升级版。 那么&#xff0c;为什么ajaxSubmit会自动提交表单呢&#xff1f; ajaxForm 不能主动提交form 就是为提交表单前做准备&#xff1b;ajaxSubmit 会自动提交 form表单 只要调用ajaxSubmit这个方法就是提交表单。两者配置相同 不…

2024年了,Layui再战三年有问题不?

v2.9.3 2023-12-31 2023 收官。 form 优化 input 组件圆角时后缀存在方框的问题 #1467 bxjt123优化 select 搜索面板打开逻辑&#xff0c;以适配文字直接粘贴触发搜索的情况 #1498 Sight-wcgtable 修复非常规列设置 field 表头选项时&#xff0c;导出 excel 出现合计行错位的…

Ubuntu系统中指定端口防火墙状态查询与操作

浏览器访问&#xff1a; 如果遇到如山图所示的情况&#xff0c;既有可能是防火墙的问题。具体解决方案参照如下&#xff1a; 1.指定端口的防火墙状态查询 &#xff08;1&#xff09;查询命令 sudo ufw status | grep 8081/tcp #其中8081为要查询的端口号 如果端口是打开的…

TDengine 时序数据库 研究学习以及实战

下载地址&#xff1a;TDengine 发布历史及下载链接 | TDengine 文档 | 涛思数据 下载客户端和服务端 服务端和客户端的安装后 TDengine 客户端连接工具地址&#xff1a;Archive Files | DBeaver Community 添加驱动 新增 》 设置 选择驱动类后 设置里的类名就自动填写了&…

Jetson nano 实时性测试,使用stress-ng 和 cyclictest

系统&#xff1a;ubuntu18.04&#xff0c;Jetpack4.3 打上了实时补丁 安装stress-ng和cyclictest sudo apt-get install stress-ng sudo apt-get install rt-tests 无负载情况的实时性 让两个CPU满载运行60秒 两个CPU满载实时性&#xff1a; 测了一下&#xff0c;4个CPU满载的…

go study oneday

这段代码的详细解释&#xff0c;涵盖了Go 语言变量声明、函数调用、用户输入、类型转换以及结果输出。 package main import "fmt" func main() {var num1 intvar num2 float32var num3 intfmt.Println("请输入数字一&#xff1a;")fmt.Scanln(&num1)f…

评中级职称为何要提前准备业绩材料?

众所周知中高级职称每年评审是只有一批&#xff0c;错过的话就只能再等一年了&#xff1b;而且每年的职称评审的时间也是不一样的&#xff0c;根据各地政策通知每年的评审时间都是会有所调整在时间截止之前还未进行提交操作&#xff0c;就意味着你已经错过了本年度的申报时间&a…

服务端性能测试——性能测试工具JMeter-L1

第一遍没学懂&#xff0c;后续文章会更新~ 目录&#xff1a; 1.JMeter介绍与安装Meter简介JMeter安装2.JMeter的运行JMeter运行、界面功能简介3.使用代理服务器录制请求录制压测脚本&#xff08;一&#xff09;Web端脚本录制方法4.测试计划5.线程组6.控制器7.JMeter采样器/取…

【面试突击】分布式技术面试实战

&#x1f308;&#x1f308;&#x1f308;&#x1f308;&#x1f308;&#x1f308;&#x1f308;&#x1f308; 欢迎关注公众号&#xff08;通过文章导读关注&#xff1a;【11来了】&#xff09;&#xff0c;及时收到 AI 前沿项目工具及新技术 的推送 发送 资料 可领取 深入理…

你真的掌握了“C语言分支循环”吗

目录 前言 1. if语句 1.1 if 1.2 else 1.3 分支中包含多条语句 1.4 嵌套if 1.5 悬空else问题 2. 关系操作符 3. 条件操作符 4. 逻辑操作符&#xff1a;&& , || , &#xff01; 4.1 逻辑取反运算符 4.2 与运算符 4.3 或运算符 4.4 练习&#xff1a;闰年的判…

Unity WebView 中文输入支持

使用版本&#xff1a;Vuplex 3D WebView for Windows v4.4&#xff1b; 测试环境&#xff1a;unity editor 2020.3.40f1c1、Windows&#xff1b; 1、打开脚本CanvasWebVie!wPrefab 2、找到_initCanvasPrefab方法&#xff0c;约略在459行附近 3、添加一行代码&#xff1a; …