plugin-vue-handler

A plugin that supports Vue to dispatch global events.

Setup

install：

npm i @mudas/plugin-vue-handler -S

You need to add configuration for vue-cli to correctly translate the es module in node_modules:

// vue.config.js:
module.exports = {
    transpileDependencies: [
      '@mudas/*' // all of node_module for '@mudas'
    ]
}

register vue plugin：

import Handler from '@mudas/plugin-vue-handler';

// bind Vue.emit()
// bind this.$handler.on(type, handler, component = null)
// bind this.$handler.off(type, component = null)
// bind this.$handler.emit(type, option = null, component = null)

Vue.use(Handler);

Usage

// app.vue or any children:
export default {
  name: 'app',

  handler: {
    ['global-event-name'](option) {
      // this = the VueComponent
      this.methodTest(option);
    }
  },

  methods: {
    methodTest(option) {
      console.warn('test-event.app:', this, option);
    }
  }
}

// Then call the following code in any business code
// to dispatch a global event so that any subcomponents
// that listen to this event "global-event-name" respond to the event:
Vue.emit('global-event-name', { arguments: 123 });