Vue封装on emit等方法

Vue中组件之间相互通信可考虑用on emit方法，而这两个方法使用时需要在同一个实例vue来调用才起作用，以下代码描述的就是用一个vue实例封装常用的方法并赋值给全局的变量，以便在任何一个组件都可调用这些方法

/assets/js/event.js

import Vue from 'vue';

const eventHub = new Vue({
    methods: {
        /* eslint-disable prefer-spread */
        on(...args) {
            this.$on.apply(this, args);
        },
        emit(...args) {
            this.$emit.apply(this, args);
        },
        off(...args) {
            this.$off.apply(this, args);
        },
        once(...args) {
            this.$once.apply(this, args);
        },
        /* eslint-disable prefer-spread */
    },
});
export const eventBusPlugin = (V) => Object.defineProperty(V.prototype, '$event', {value: eventHub, writable: true});

export default eventHub;

main.js 引用封装的event

import Vue from 'vue';
import {eventBusPlugin} from '/assets/js/event';
Vue.use(eventBusPlugin);//使用封装的event.js
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
});

在页面使用封装的event

mounted(){
    this.$event.on('change_value',id);
    this.$event.emit('change_value',1);
    ...
}