vue的事件机制(vue中的总线机制(EventBus)解析)
一 、EventBus的简介
EventBus 又称时间总线 ,理解上来讲 EventBus 机制是通知的概念 ,EventBus作为所有组件共享的事件中心,既可以发送事件也可以接受事件 ,所有组件都可以平行的接到到相对应的数据 。
二 、使用方法
第一步:2种方式初始化
在项目中使用事件总线时 ,需要初始化一条总线 ,初始化的方式有两种
第一种:通过 .js 文件将总线作为模块化导入
第二种:通过 prototype 将总线注册为全局总线 ,直接在main.js中初始化以下代码(推荐使用)
第二步:发送事件
在组件中引入总线文件 ,使用 EventBus.$emit(‘事件名称’ ,数据)进行发送数据
第三步:接受事件
在组件中引入总线文件 ,使用 EventBus.$on(‘emit事件名’ ,callback(payload1...))进行接受事件
在一个组件中某事件如果只监听一次的话 ,可以使用 EventBus.$once(事件名称,callBack(payload1...));
第四步:移除事件
三 、全局EventBus
1 、注册 ,在main.js中
2 、在组件中使用
四 、EventBus的优缺点
缺点
vue作为单页面应用 ,如果在某一个页面刷新了之后 ,与之相关的EventBus会被移除 。 如果业务有反复操作的页面 ,EventBus在监听的时候就会触发很多次 ,也是一个非常大的隐患 。这时候我们就需要好好处理EventBus在项目中的关系 。通常会用到 ,在vue页面销毁时 ,同时移除EventBus事件监听 。 由于是都使用一个Vue实例 ,所以容易出现重复触发的情景 ,两个页面都定义了同一个事件名,并且没有用$off销毁(常出现在路由切换时) 。优点
解决了多层组件之间繁琐的事件传播。 使用原理十分简单 ,代码量少 。以上为个人经验 ,希望能给大家一个参考,也希望大家多多支持本站 。
创心域SEO版权声明:以上内容作者已申请原创保护,未经允许不得转载,侵权必究!授权事宜、对本内容有异议或投诉,敬请联系网站管理员,我们将尽快回复您,谢谢合作!