Vue.js EventBus approach

messageBroker.js

const listeners = ctx => {
  if (!ctx.$options.on) {
    return
  }

  const listeners = {}

  Object.entries(ctx.$options.on)
    .forEach(([event, callback]) => {
      listeners[event] = callback.bind(ctx)
      ctx.$root.$on(event, listeners[event])
    })

  Object.defineProperty(ctx, '$_events', Object.freeze(listeners))
}

const useMessageBroker = {
  created () {
    listeners(this)

    const $dispatch = (...args) => this.$root.$emit(...args)

    Object.defineProperty(this, '$dispatch', {
      get: () => $dispatch
    })
  },
  beforeDestroy () {
    Object.entries(this.$_events || {})
      .forEach(([event, callback]) => {
        this.$root.$off(event, callback)
      })
  }
}

export { useMessageBroker }