Vue59-全局事件总线:任意组件间通信

一、原理图

只是总结出的经验,不是新的API! 

二、x的要求:

1、保证x被所有组件看见;

2、x可以调用的到$on,才能绑定事件,还能调用到:$of, $emit;

三、x的创建:

3-1、保证x被所有组件看见

vue的原型,所有的vc和vm都能访问到,所以x创建在vue的原型上。

vue在main.js中创建的,所以,x的创建写在main.js中:

组件里面通过this.x去调!(找不到会一层层往上找。) 

3-2、x可以调用的到$on,才能绑定事件,还能调用到:$of, $emit;

$on,$of, $emit在vue原型对象上的。

 

3-3、x创建的优化 

模版还没有解析

3-4、注意点:

此时,容易造成绑定自定义事件的事件名冲突,因为bus只有一个!

在组件销毁之前,把身上的自定义事件解绑!

 

四、小结

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

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

相关文章

机器学习课程复习——奇异值分解

1. 三种奇异值分解 奇异值分解(Singular Value Decomposition, SVD)包含了: 完全奇异值分解(Complete Singular Value Decomposition, CSVD)紧奇异值分解(Tight Singular Value Decomposition, TSVD)截断奇异值分解(Truncated Singular Value Decomposition, TSVD)no…

助力低空经济-eVTOL/无人机ADS-B航管应答机选型指南

一、低空经济概述 “低空经济”在今年全国两会首次写入政府工作报告。近日,工业和信息化部、科学技术部、财政部、中国民用航空局印发《通用航空装备创新应用实施方案(2024—2030年)》,提出到2030年,推动低空经济形成…

主窗体设计

自学python如何成为大佬(目录):https://blog.csdn.net/weixin_67859959/article/details/139049996?spm1001.2014.3001.5501 Python、QT与PyCharm配置完成后,接下来需要对快手爬票的主窗体进行设计,首先需要创建主窗体外层为(红色框内&…

相交链表(Leetcode)

题目分析: . - 力扣(LeetCode) 相交链表:首先我想到的第一个思路是:如图可知,A和B链表存在长度差,从左边一起遍历链表不好找交点,那我们就从后面开始找,但是这是单链表&…

一个新的剪辑拼接图片和视频类APP在测试阶段需要测试内容,以iPhone APP为例:

1.UI参照原型图和设计稿 如有改动,需及时沟通 2.iPad转屏、不同iPhone和iPad机型测试 3.黑夜白天模式 2.各功能模块流程需要测试跑通 3.订阅支付模块 a. UI设计是否和设计稿一致 b.涉及订阅的位置都要测试 c.免费试用是否显示;试用结束后&#xff0c…

HDFS笔记

第1章 HDFS概述 1.1 HDFS产出背景及定义 1)HDFS产生背景 随着数据量越来越大,在一个操作系统存不下所有的数据,那么就分配到更多的操作系统管理的磁盘中,但是不方便管理和维护,迫切需要一种系统来管理多台机器上的文…

typeScript debug 调试

以leetcode 20为例 0.首先编写代码 function isValid(s: string): boolean {let stack: string[] []for (let index 0; index < s.length; index) {let x: string s[index]debuggerswitch (x) {case (:stack.push())breakcase [:stack.push(])breakcase {:stack.push(})…

快速压缩前端项目

背景 作为前端开发工程师难免会遇到需要把项目压缩成压缩文件来传送的情况&#xff0c;这时候需要压缩软件进行压缩文件处理 问题 项目中的依赖包文件非常庞大&#xff0c;严重影响压缩速度&#xff0c;即使想先删除再压缩&#xff0c;删除文件也不会很快完成 解决 首先要安…

EXCELITAS电源维修TLX302高压电源维修

埃赛力达电源维修 EXCELITAS电源维修 海曼电源维修 高压电源维修 EXCELITAS高压电源维修故障包括&#xff1a;无输出&#xff0c;高压达不到&#xff0c;电流达不到标准&#xff0c;高压打火,高压线接头处太靠近铁壳部分。无光,风扇不转。保险丝断&#xff0c;可以强制发光,不…

Java——构造器(构造方法)和 this

一、什么是构造器 构造器&#xff08;Constructor&#xff09;是Java类的一种特殊方法&#xff0c;用于初始化对象的状态。构造器在创建对象时被调用&#xff0c;可以对对象的成员变量进行初始化。 我之前的文章《Java——类和对象-CSDN博客》中也提到了构造器。 二、构造器…

文件二维码怎么快速生成?在线文件生码的使用技巧

文件现在经常会做成二维码的方式来展示内容&#xff0c;通过这种方式能够更加简单快捷的将文件分享给其他人查看或者下载&#xff0c;而且文件生成活码可以长期使用&#xff0c;随时替换当前二维码中的内容&#xff0c;那么可以长期使用的文件二维码该如何制作呢&#xff1f; …

Android开发Activity生命周期详解

本文详解Android开发Activity生命周期。 目录 一、Activity 二、Activity生命周期 三、生命周期特性 四、常见情况生命周期的执行顺序 一、Activity Activity是用户交互的第一接口&#xff0c;它提供了一个用户完成指令的窗口。当开发者创建Activity之后&#xff0c;通过…

Springboot 集成 Shardingsphere-JDBC

Springboot 集成 Shardingsphere-JDBC Shardingsphere系列目录&#xff1a;背景前提新增依赖分表策略简单分库分表策略垂直分库广播表水平分库(单表)水平分库(多表)水平分表 HINT配置逻辑代码 自定义分库分表&#xff08;精准定位范围查询&#xff09;配置代码精准定位数据库精…

Linux DNS配置文档

一、问题描述 1. 无法在浏览器通过域名访问百度&#xff1b; 2. 无法在终端 ping 通百度&#xff0c;例如&#xff1a;ping www.baidu.com 3. 可以 ping 通公网地址&#xff0c;例如&#xff1a;ping 114.114.114.114 或 ping 8.8.8.8 二、问题原因 域名解析 DNS 配置错误&am…

数据结构历年考研真题对应知识点(单链表、双链表、循环链表)

目录 2.3线性表的链式表示 2.3.1单链表的定义 【单链表的应用(2009、2012、2013、2015、2016、2019)】 2.3.2单链表上基本操作的实现 【单链表插入操作后地址或指针的变化(2016)】 2.3.3双链表 【双链表中插入操作的实现(2023)】 【循环双链表中删除操作的实现(2016)】 …

地图上绘制地铁线路

需求背景 不管是之前的pms 地铁还是location都会有需求涉及到地图上绘制地铁线路&#xff0c;来查看当前位置是否靠近地铁口&#xff0c;常规的交互可以看下高德地图&#xff0c;如图所示&#xff1a; 需求分析 不管是高德地图还是百度地图都提供了简易版的地铁线路图&#x…

Excel如何设置自动更新的固定选项

日常工作中你是否想要某数据列设置固定选项&#xff0c;如人力组、财务组、综合组、业务组等&#xff0c;可用“数据验证”实现&#xff0c;如后期新增选项“党建组”&#xff0c;该如何快速处理&#xff1f; 今天刘小生分享“超级表数据验证”方式&#xff0c;只实现固定选项…

若依RuoYi-Vue分离版—富文本Quill的图片支持伸缩大小及布局

若依RuoYi-Vue分离版—富文本Quill的图片支持伸缩大小及布局、工具栏带中文提示 1.在vue.config.js 文件中添加 一下内容2.下载安装插件3.在Editor组件中引入插件4.使用Editor组件&#xff08;特别注意要的加 v-if &#xff09;5.bug 之 imageResize的 img的style丢失1.先创建一…

不是所有洗碗机都能空气除菌 友嘉灵晶空气除菌洗碗机评测

精致的三餐让你以为生活是“享受”&#xff0c;可饭后那些油腻的锅碗瓢盆却成了你我美好生活的最大障碍。想要只吃美食不洗碗&#xff0c;那一台优秀的洗碗机就必不可少了&#xff01;今天&#xff0c;ZOL中关村在线要评测的就是这样一台不光洗得干净更能有效除菌抑菌的洗碗机—…

SpringBoo+vue3+vite整合讯飞星火3.5通过webscoket实现聊天功能(前端代码)附带展示效果

访问地址&#xff1a; 天梦星服务平台 (tmxkj.top)https://tmxkj.top/#/site 后端文档&#xff1a; SpringBoovue3整合讯飞星火3.5通过webscoket实现聊天功能&#xff08;全网首发&#xff09;附带展示效果_springboot websocket vue3-CSDN博客https://blog.csdn.net/qq_53722…