温馨提示×

Vue eventBus事件总线封装后再用怎么实现

发布时间:2022-06-23 14:12:19 来源:亿速云 阅读:86 作者:iii 栏目:开发技术

今天小编给大家分享一下Vue eventBus事件总线封装后再用怎么实现的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。

空vue实例构建的事件总线

在改造一个项目的时候就发现,里面的 bus.js 文件中就是这么处理的。两行代码搞定。

import Vue from "vue"; 
export default new Vue()

使用的时候,就没那么简单了,有这么一个空的容器,在需要传值的组件里就得引入这个文件。然后通过 bus.on()绑定事件,通过bus.on() 绑定事件,通过 bus.on()绑定事件,通过bus.emit()进行分发事件。

import bus from'@/utils/bus'
// 绑定事件
bus.$on('event',()=>{....})

// 监听事件
bus.$emit('event',this.tasks)

这种方式使用起来也简单但也不太方便,毕竟到处都要引入下,那有没有什么办法可以解决呢。继续...

简单的方式

先来个简单的吧,虽然看上去有点不太习惯,但的确也挺好使的,而且直接挂载到vue实例上,哪里用哪里直接 this 即可,相对来说方便多了,不用到处引入文件了。挂载方式如下:

new Vue({
  beforeCreate() {
    // 尽量早地执行挂载全局事件总线对象的操作
    Vue.prototype.$bus = this;
  },
  router,
  store,
  render: h => h(App)
}).$mount('#app');

这种方式虽然挂载简单,但是使用上还是有点不能尽如人意,不信你看:

// 绑定事件
this.$bus.$on('send', ()=>{ // 使用事件 });

// 分发事件
this.$bus.$emit('send', 'emit');

猛地一看,这不挺好的么,挺简单的啊!可是我有洁癖怎么办,我有强迫症怎么办,我就不想看到两个 $符怎么办我就只想要下面的这种方式的:

// 绑定事件
this.$bus.on('send', ()=>{ // 使用事件 });

// 分发事件
this.$bus.emit('send', 'emit');

那你说,人家都是 $on$emit的用的,怎么就不行了啊,实在不行就自己改造个吧,说干就干,who 怕 who,安排!

复杂又简单的方式

先构思下,想要个什么样效果的,比如,我不想要用的时候都要引入下文件,要一次引入,处处可用; 我不想要两个 $ 的调用方式,或者说可以随心情的使用; 再者通过Vue对象也可以直接使用。

思路大概理了理,那就开干呗,简单干脆点,直接上代码!

'use strict';
function VueBus(Vue) {
  let bus = new Vue();

  Object.defineProperties(bus, {
    on: {
      get() {
        return this.$on.bind(this);
      }
    },
    once: {
      get() {
        return this.$once.bind(this);
      }
    },
    off: {
      get() {
        return this.$off.bind(this);
      }
    },
    emit: {
      get() {
        return this.$emit.bind(this);
      }
    }
  });

  Object.defineProperty(Vue, 'bus', {
    get() {
      return bus;
    }
  });

  Object.defineProperty(Vue.prototype, '$bus', {
    get() {
      return bus;
    }
  });
  if (typeof window !== 'undefined' && window.Vue) {
    window.Vue.use(VueBus);
  }

  return bus;
}

export default VueBus;

来看看使用方式吧,是不是跟想象的一样简单,在 main.js 中引入,并通过 vue.use() 注入进来,加载方式就这么简单。

import EventBus from '@/libs/bus';

Vue.use(EventBus);

使用上更灵活了,想怎么用就怎么用,支持以下几种方式,至于$off$once使用上通 $on$emit一样。

// 绑定事件
this.$bus.on('send', this.handleSend); // 推荐
this.$bus.$on('send', this.handleSend);
Vue.bus.on('send', this.handleSend);
Vue.bus.$on('send', this.handleSend);

// 分发事件
this.$bus.emit('send', ''); // 推荐
this.$bus.$emit('send', 'emit');
Vue.bus.emit('send', 'emit');
Vue.bus.$emit('send', 'emit');

上面这几种方式均可。是不是更灵活了呢。想怎么用就怎么用,再也不用担心会写错调用方式了。

以上就是“Vue eventBus事件总线封装后再用怎么实现”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注亿速云行业资讯频道。

推荐阅读:为什么项目中用了JOOQ后大家都不愿再用Mybatis?

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

免费拨打  400 100 2938 免费拨打 400 100 2938
24小时售后技术支持 24小时售后技术支持
返回顶部 返回顶部