vue自动销毁的eventBus

我们通常在使用非父子组件间通信时，采用new Bus()的方式来做一个事件广播。但一个弊端就是，这种方式并不会自动销毁，所以为了避免回调函数重复执行，还要在destroyed周期中去做Bus.$off('event name', fn)的操作。

这样带来的冗余代码就是:

$on 的回调函数必须是具名函数。不能简单的Bus.$on('event name', () => {})使用匿名函数作为回调了，所以需要将回调函数放到metheds中进行额外的声明
在destroyed生命周期中去销毁事件的监听。

因此轮子就被造出来，在非父子组件间通信时，解决重复绑定事件、无法自动销毁的而导致回调函数被执行多次的问题。

import Vue from 'vue'// 存储所有的事件
const EventStore = {}
const Bus = new Vue()const destoryHandler = function() {// this 为调用此方法的vue组件const currentEventObj = EventStore[this._uid]if (!currentEventObj) {return}for (const type in currentEventObj) {const key = Array.isArray(type) ? type.join(',') : type// Bus 解绑事件Bus.$off(type, currentEventObj[key])}// 删除记录的事件集合delete EventStore[this._uid]
}const BusFactory = (vm) => {// 获取当前组件实例的destroyed生命周期const destroyed = vm.$options.destroyed// 获取当前组件实例的uidconst uid = vm._uidEventStore[uid] = {}!destroyed.includes(destoryHandler) && destroyed.push(destoryHandler)return {$on: (type, handler) => {const key = Array.isArray(type) ? type.join(',') : typeEventStore[uid][key] = handlerBus.$on(type, handler)},$off: (type, handler) => {if (!type) {delete EventStore[uid]Bus.$off()return}const key = Array.isArray(type) ? type.join(',') : type// 删除对应的事件delete EventStore[uid][key]Bus.$off(type, handler)},$once: (...params) => Bus.$once(...params),$emit: (...params) => Bus.$emit(...params)}
}// 这两行是允许bus不调用依然能够触发emit和once
BusFactory.$emit = (...params) => Bus.$emit(...params)
BusFactory.$once = (...params) => Bus.$once(...params)export default BusFactory

组件中使用：

import BusFactory from 'bus'
export default {data () {return {bus: BusFactory(this) // 使用BusFactory�将this绑定之后，返回一个 bus，即可无需关心销毁的问题了}},created () {// 在生命周期中进行 $onthis.bus.$on('event name', () => {// do  something})// 当使用 $once 与 $emit 可直接在BusFactory使用BusFactory.$once('event name', () => {// do  something})BusFactory.$emit('event name', '参数')}
}

参考Vue自动销毁的vue event Bus

vue自动销毁的eventBus相关推荐

vue如何主动销毁子组件_Vue自动销毁的vue event Bus
我们通常在使用非父子组件间通信时,采用new Bus()的方式来做一个事件广播. 但一个弊端就是,这种方式并不会自动销毁,所以为了避免回调函数重复执行,还要在destroyed周期中去做Bus.$of ...
vue组件通信方式之eventBus
我们在vue项目中最常遇到的问题就是组件之间的通信,父子通信,兄弟通信,跨组件之间的通信. 父子通信,通常父组件向子组件通过props传值,子组件通过使用$emit向父组件传参,还有诸如 $paren ...
vue自动滚动组件可以支持鼠标滚轮操作
vue自动滚动组件可以支持鼠标滚轮操作  <templat ...
vue 自动px单位自动转换rem
vue 自动px单位自动转换rem vue 适配移动端假设设计图是750 第一步安装 lib-flexible npm i lib-flexible --save 第二步 px2rem-loade ...
【Unity3D日常开发】生成预制体，并且预制体自动销毁
推荐阅读 CSDN主页 GitHub开源地址 Unity3D插件分享简书地址我的个人博客 QQ群:1040082875 一.前言今天有粉丝问我一个很简单的问题,如何生成预制体,并且让预制体自动销 ...
vue 自动填充_通过邮政编码与Ziptastic自动填充城市和州
vue 自动填充作者克里斯·科耶尔最近更新时间 2017年4月23日翻译自: https://css-tricks.com/using-ziptastic/ vue 自动填充
Vue事件总线（EventBus）、$on、$emit、$off
在之前我们只用过父传子,子传父进行传数据,这时候当组件嵌套比较深或比较复杂的情况,这时候就用到了事件总线 (EventBus) 如何理解事件总线呢,你可以理解为用来传输数据的一条线注意点:有组件发 ...
vue组件销毁重置详解
v-if方式 :key方式 $destroy v-if方式 <template><third-comp v-if="reFresh"/> </temp ...
vscode输入vue自动_vscode配置总结可收藏/vscode用户设置大全/vue代码模板，vscodevue...
vscode配置总结可收藏/vscode用户设置大全/vue代码模板,vscodevue //用户设置 { //-------- 搜索配置 -------- "search.excl ...

vue自动销毁的eventBus

vue自动销毁的eventBus相关推荐

最新文章

热门文章