今天小编给大家分享一下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事件总线封装后再用怎么实现”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注编程网行业资讯频道。
