Vue全局事件总线

2023-09-22 07:05:44

1.简介 

 全局事件总线时一种组件间通信的方式,适用于任意组件间通信

2.原理

分析: 如果A组件想要传递数据给B组件,那么就通过全局事件总线在B组件中绑定一个自定义事件,并界定一个参数来接收传递的数据,在A组件中,就需要通过全局事件总线对自定义事件进行触发,并传递参数

简单理解:全局事件总线其实就是一个中间介质,组件间的相互通信借助于这个中间介质,通过这个中间转换介质,从而完成数据的传递与接收,实现组件间的相互通信

一、满足所有组件都能访问得到全局事件总线

既然要能让所有组件都能访问得到全局事件总线,那么创建的思路就是,全局事件总线一定要让vc或者vm访问得到。

结合组件的内置关系:

VueComponent.prototype.__proto__===Vue.prototype

这个关系的作用就在于可以让组件实例对象(vc)可以访问到Vue原型上的属性和方法

二、可以调用$on,$off和$emit

因为$on,$off和$emit这三个方法在vue原型对象上,所以,我们的全局事件总线就要放在Vue的原型对象(vue.prototype)上,以确保每个组件都能访问得到

以下案例为A组件向B组件传递数据,B组件接收A组件传递过来的数据

(1)实现全局事件总线

首先,想要实现全局事件总线,就要安装全局事件总线,在main.js中完成全局事件的安装配置

main.js
//创建vm
new Vue({
	el:'#app',
	render: h => h(App),
	// beforeCreate中模板未解析,且this是vm
	beforeCreate(){
		Vue.prototype.$bus = this	//安装全局事件总线
	}
})

(2)绑定全局事件总线

接下来,我们就要对想要接受到数据的组件进行自定义事件的绑定,简单来说就是,谁要接收数据,自定义事件即绑定在谁身上

testB.vue:
mounted(){
  // 绑定自定义事件
  this.$bus.$on('自定义事件名', (接收参数)=>{
    console.log('我是TestB组件,收到了数据', 接收参数);
  })
}

(3)触发全局事件

最后一步,全局事件总线的触发,事件的触发是在发送数据的组件中完成的,简单来说,谁是数据的发送者,谁就来触发这个事件

testA.vue
 methods:{
  // 触发事件,事件名不能重复
  触发事件方法名(){
    this.$bus.$emit('自定义事件名', 传递参数);
  }
},

完整代码

main.js

testB.vue 

testA.vue 

我的总结:

A组件向B组件传递数据,则A组件就是使用this.$bus.$emit来触发自定义事件,把数据写在回调函数中,B组件通过this.$bus.$on来绑定自定义事件,后面的data来接收A组件传递的数据 

 数据传递前:

点击按钮触发全局事件总线后:

此时,数据已经传递到了testB.vue中

最后:

得到数据之后,解绑事件,提高性能

// 销毁对应自定义事件
beforeDestroy(){
  this.$bus.$off('自定义事件名')
}

参考文章:

【Vue全局事件总线详解】_vue事件总线_小田是个程序员的博客-CSDN博客

更多推荐

电信卡一个月内申请几张?只能申请一张吗?

很多朋友在申请了一张电信卡后,再申请的话就会提示重复申请,这种情况是怎么回事儿呢?可能大家对于线上的流量卡申请规则还不太清楚,下来搜卡之家小编给大家普及一下。​根据运营商规定,在线上办理流量卡规则是:一个身份证、一个收货电话、一个地址、同一个人、一个运营商30天内只能申请一张卡,不能办理第2张电信卡。一个身份证、一个收

Ubuntu下运行adb devices找不到设备的问题

问题描述Windows下安装Androidstudio,里面含有AndroidSDK,自动包含了adb在内的很多工具包;因开发需要,在WSL中安装了Ubuntu,分别是18和22的,其中也分别安装了AndroidSDK,官网下载,可以运行adb命令。本来在Windows下和Ubuntu下都可以直接使用,但是今天上来在U

SQL 注入攻击的原理是什么

什么是SQL注入攻击,SQL注入攻击的原理是什么SQL注入攻击是一种常见的网络安全漏洞,攻击者可以通过注入恶意SQL语句来攻击Web应用程序。本篇文章将介绍SQL注入攻击的原理和如何防范SQL注入攻击,并提供一些代码示例。什么是SQL注入攻击SQL注入攻击是一种利用Web应用程序中的SQL语句输入漏洞的攻击方式。攻击者

10.12广州见 | 第十六届智慧城市大会报名通道全面开启

第十六届中国智慧城市大会将于10月12日至13日在广州举办智慧城市是数字中国、智慧社会的核心载体,是数字时代城市发展的高级形态。由中国服务贸易协会、中国测绘学会、中国遥感委员会主办的第十六届中国智慧城市大会,将以“数实融合·开放创新·智引未来”为主题,拟邀请行业主管单位和智慧城市规划建设管理单位领导、两院院士、业内知名

标准C++中string类函数总结

标准c++中string类函数介绍注意不是CString之所以抛弃char*的字符串而选用C++标准程序库中的string类,是因为他和前者比较起来,不必担心内存是否足够、字符串长度等等,而且作为一个类出现,他集成的操作函数足以完成我们大多数情况下(甚至是100%)的需要。我们可以用=进行赋值操作,==进行比较,+做串

EFK代替ELK方案7.17.3

文章目录一.传统的ELK二.EFK2.1安装elasticsearch2.2服务端安装fileBeats2.2.1.安装`该也没有必要安装docker`,直接下载yum或官网jar包启动即可.2.2.2.编辑配置文件filebeat-java-logback.yml2.2.3.es配置`common_log_pipel

Linux文件编程(open read write close函数)

文章目录前言一、open函数二、read函数三、write函数四、openreadwrite函数本质五、close函数总结前言本篇文章我们来讲解Linux中的文件编程,这篇文章会先介绍openreadwrite函数。一、open函数open函数是一个在POSIX标准中定义的函数,用于打开文件或者创建新文件。它是文件操作

Java入门级简单定时任务TimerTask

如果要执行一些简单的定时器任务,无须做复杂的控制,也无须保存状态,那么可以考虑使用JDK入门级的定期器Timer来执行重复任务。一、原理JDK中,定时器任务的执行需要两个基本的类:java.util.Timer;java.util.TimerTask;要运行一个定时任务,最基本的步骤如下:1、建立一个要执行的任务Tim

《软件方法》第1章2023版连载(03)建模工作流

DDD领域驱动设计批评文集做强化自测题获得“软件方法建模师”称号《软件方法》各章合集1.2建模工作流1.2.1建模工作流ABCD如何能做好需求和设计,达到“低成本制造好卖的系统”的目标?并非喊喊口号就可以,需要静下心来学习和实践一些必要的建模技能。软件开发是增量、迭代进行的,每一个迭代周期都需要依次思考这么几个事情:A

四川玖璨电子商务有限公司培训可靠吗?

四川玖璨电子商务有限公司是一家在抖音平台上进行培训的电商公司。如今,随着抖音带货的火热,越来越多的人加入到这个行业中。然而,对于消费者来说,选择一个可靠的抖音培训公司并不容易。在这个领域中,四川玖璨电子商务有限公司是一个备受瞩目的公司。公司致力于为消费者提供高品质的商品和良好的服务。他们在抖音上拥有大量的粉丝,并且他们

【数据结构】图的应用:最小生成树;最短路径;有向无环图描述表达式;拓扑排序;逆拓扑排序;关键路径

目录1、最小生成树1.1概念1.2普利姆算法(Prim)1.3克鲁斯卡尔算法(Kruskal)2、最短路径2.1迪杰斯特拉算法(Dijkstra)2.2弗洛伊德算法(Floyd)2.3BFS算法,Dijkstra算法,Floyd算法的对比3、有向无环图描述表达式3.1有向无环图定义及特点3.2描述表达式4、拓扑排序4.

热文推荐