vue 事件总线EventBus的概念、使用以及注意点
vue组件中的数据传递最最常见的就是父子组件之间的传递。父传子通过props向下传递数据给子组件;子传父通过$emit发送事件,并携带数据给父组件。而有时两个组件之间毫无关系,或者他们之间的结构复杂,如何传递数据呢?这时就要用到 vue 中的事件总线 EventBus的概念
EventBus的简介
EventBus
又称事件总线,相当于一个全局的仓库,任何组件都可以去这个仓库里获取事件
EventBus的使用
废话不多说,直接开始使用EventBus
一、初始化
要用EventBus
,首先要初始化一个EventBus
,这里称它为全局事件总线。
-第一种初始化方法
import Vue from 'vue'
//因为是全局的一个'仓库',所以初始化要在全局初始化
const EventBus = new Vue()
-第二种初始化方法(本文选用这种初始化方法)
//在已经创建好的Vue实例原型中创建一个EventBus
Vue.prototype.$EventBus = new Vue()
二、向EventBus发送事件
发送事件的语法:this.$EventBus.$emit(发送的事件名,传递的参数)
已经创建好EventBus
后我们就需要向它发送需要传递的事件,以便其他组件可以向EventBus
获取
例子:有两个组件A和B需要通信,他们不是父子组件关系,B
事件需要获得A
事件里的一组数据data
<!-- A.vue 这里是以模块化的方式讲解的,即A组件和B组件分别各自
一个.vue文件,所以代码中会有导入的语法--><template><button @click="sendMsg">发送MsgA</button>
</template><script>
export default {data(){return{MsgA: 'A组件中的Msg'}},methods: {sendMsg() {/*调用全局Vue实例中的$EventBus事件总线中的$emit属性,发送事件"aMsg",并携带A组件中的Msg*/this.$EventBus.$emit("aMsg", this.MsgA);}}
};
</script>
三、接收事件
接收事件的语法:this.$EventBus.$on(监听的事件名, 回调函数)
A
组件已经向全局事件总线EventBus
发送了一个aMsg
事件,这时B组件就可以去aMsg监听这个事件,并可以获得一些数据。
<!-- B.vue --><template><!-- 展示msgB --><p>{{msgB}}</p></template><script>
export default {data(){return {//初始化一个msgBmsgB: ''}},mounted() {/*调用全局Vue实例中的$EventBus事件总线中的$on属性,监听A组件发送到事件总线中的aMsg事件*/this.$EventBus.$on("aMsg", (data) => {//将A组件传递过来的参数data赋值给msgBthis.msgB = data;});}
};
</script>
B组件展示结果:
A组件中的Msg
这样,B
组件就轻松接收到了A
组件传递过来的参数,并成功展示了该参数,这样是不是就很简单的解决了各组件之间的通讯呢?虽然EventBus
是一个很轻便的方法,任何数据都可以往里传,然后被别的组件获取,但是如果用不好,容易出现很严重的BUG
,所以接下来我们就来讲解一下移除监听事件。
四、移除监听事件
在上一个例子中,我们A组件向事件总线发送了一个事件aMsg
并传递了参数MsgA
,然后B
组件对该事件进行了监听,并获取了传递过来的参数。但是,这时如果我们离开B
组件,然后再次进入B组件时,又会触发一次对事件aMsg
的监听,这时时间总线里就有两个监听了,如果反复进入B
组件多次,那么就会对aMsg
进行多次的监听。
总而言之,A
组件只向EventBus
发送了一次事件,但B
组件却进行了多次监听,EventBus
容器中有很多个一模一样的事件监听器这时就会出现,事件只触发一次,但监听事件中的回调函数执行了很多次
1.解决办法:在组件离开,也就是被销毁前,将该监听事件给移除,以免下次再重复创建监听
2.语法:this.$EventBus.$off(要移除监听的事件名)
<!-- B.vue --><template><!-- 展示msgB --><p>{{msgB}}</p></template><script>
export default {data(){return {//初始化一个msgBmsgB: ''}},mounted() {/*调用全局Vue实例中的$EventBus事件总线中的$on属性,监听A组件发送到事件总线中的aMsg事件*/this.$EventBus.$on("aMsg", (data) => {//将A组件传递过来的参数data赋值给msgBthis.msgB = data;});},beforeDestroy(){//移除监听事件"aMsg"this.$EventBus.$off("aMsg")}
};
</script>
vue 事件总线EventBus的概念、使用以及注意点相关推荐
- vue中央事件总线eventBus的简单理解和使用
公共事件总线eventBus的实质就是创建一个vue实例,通过一个空的vue实例作为桥梁实现vue组件间的通信.它是实现非父子组件通信的一种解决方案. 用法如下: 第一步:项目中创建一个js文件(我通 ...
- Vue事件总线(EventBus)、$on、$emit、$off
在之前我们只用过父传子,子传父进行传数据,这时候当组件嵌套比较深或比较复杂的情况,这时候就用到了事件总线 (EventBus) 如何理解事件总线呢,你可以理解为用来传输数据的一条线 注意点:有组件发 ...
- Google guava 事件总线 EventBus 进程内消息队列
Google guava 事件总线 EventBus 创建事件总线流程 码代码 引入依赖 一个简单的事件处理 监听者 创建事件生产者总线.注册事件监听者.发送事件 运行结果 扩展 多个事件监听者加De ...
- 2021-12-14 vue移动端卖座电影项目(十二) 使用mapState控制封装选项卡tabbar的显隐,以及回顾使用中央事件总线eventbus和vuex的state控制tabbar显隐的异同
文章目录 0.实现场景:进入详情页时,底部选项卡隐藏 1.使用中央事件总线控制tabbar的v-show的值 2.使用vuex的state控制tabbar的v-show的值 3.使用vuex的muta ...
- vue事件总线_[面试] 聊聊你对 Vue.js 框架的理解
作者:yacan8 https://github.com/yacan8/blog/issues/26 本文为一次前端技术分享的演讲稿,所以尽力不贴 Vue.js 的源码,因为贴代码在实际分享中,比较枯 ...
- Android之事件总线EventBus详解
顾名思义,AndroidEventBus是一个Android平台的事件总线框架,它简化了Activity.Fragment.Service等组件之间的交互,很大程度上降低了它们之间的耦合,使我们的代码 ...
- 自己动手写事件总线(EventBus)
2019独角兽企业重金招聘Python工程师标准>>> 本文由云+社区发表 事件总线核心逻辑的实现. <!--more--> EventBus的作用 Android中存在 ...
- 手写实现简单的Vue事件总线
一.什么是事件总线 自定义事件总线属于一种观察者模式,其中包括三个角色: 发布者(Publisher):发出事件(Event): 订阅者(Subscriber):订阅事件(Event),并且会进行响应 ...
- Android事件总线——EventBus的使用
前言 首先我们来说下事件总线,它的作用:为了更简化并更高质量的在Activity,Fragment,Thread和Service等之间的通信,解决组件之间高耦合的同时仍能进行高效的通信. 什么是Eve ...
最新文章
- ES : 软件工程学的复杂度理论及物理学解释
- apache2 默认端口修改
- 数字内置方法详解(int/long/float/complex)
- 团队网站 ,资料陆续更新中。
- CodeSmith 基础用法和例子
- (转帖)开源容器集群管理系统Kubernetes架构及组件介绍
- html5多大场景,HTML5新标签解释及其使用场景
- linux系统下载r软件安装,在Linux系统安装R
- mysql数据库主从出现1236错误
- CRM 权限设置 ss
- 天工软件在正射项目中的应用与常见问题解答
- 二分查找与 bisect 模块
- 关于2018、2019后的 MacBook 苹果电脑增加T2安全芯片造成无法U盘启动解决办法
- 梦幻西游的脚本怎么制作
- TeamViewer——一款强大的远程控制工具
- Cloudera Manager 基本介绍(CDH版本)
- JetBrain代码补全
- /* 商人过河的问题 假如有三个商人各带一个随从要过河。 只有一条船得需要他们划每次只能坐两个人,条件是任何一岸的随从多于商人时随从就会抢劫商人。 请问这三个商人怎样才能安全过河? */...
- 集美大学计算机毕业论文,集美大学毕业论文要求.doc
- 短视频搬运二次剪辑伪原创教程
热门文章
- 12无法使用otg_ios设备该如何选择U盘,以及U盘日常使用技巧
- pandas isnull 函数
- Qt中的QProgressDialog
- C++继承中的构造与析构
- Linux uart寄存器读写,Linux下读写UART串口的代码
- MySQL是自主可控的吗_国产处理器那么多,究竟有哪些,是真正的“自主可控”?...
- .net 连接mysql的字符串_asp.net连接数据库字符串
- Tornado多进程启动的2种方法
- 99. Leetcode 322. 零钱兑换 (动态规划-完全背包)
- bash文件外传入参数