Vue eventBus事件总线封装后再用的方式

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

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

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

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');

'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;

import EventBus from '@/libs/bus';

Vue.use(EventBus);

// 绑定事件
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');