为了使您的应用程序中的任何地方可用，您可以将其附加到Vue全局对象。
const EventBus = new Vue()

Object.defineProperties(Vue.prototype, {
  $bus: {
    get: function () {
      return EventBus
    }
  }
})

触发全局事件
1.您现在可以触发组件中的事件：

export default {
  name: 'my-component',
  methods: {
    triggerMyEvent () {
      this.$bus.$emit('my-event', { ... pass some event data ... })
    }
}

2.或直接在您的HTML模板
<div>
  <button @click="$bus.$emit('my-event')">Click to trigger event</button>
</div>


监听事件
事件可以在任何组件中收听。

export default {
  name: 'my-component',
  created () {
    this.$bus.$on('my-event', ($event) => {
      console.log('My event has been triggered', $event)
    })
  }
}

包括事件总线组件本身
const EventBus = new Vue({
  created () {
    this.$on('my-event', this.handleMyEvent)
  },
  methods: {
    handleMyEvent ($event) {
      console.log('My event caught in global event bus', $event)
    }
  }
})