//src/service/bus.js
export default (Vue) => {
 const eventHub = new Vue()
 Vue.prototype.$bus = {
 /**
  * @param {any} event 第一個(gè)參數(shù)是事件對象，第二個(gè)參數(shù)是接收到消息信息，可以是任意類型
  * @method $on 事件訂閱, 監(jiān)聽當(dāng)前實(shí)例上的自定義事件。https://cn.vuejs.org/v2/api/#vm-on
  * @method $off 取消事件訂閱，移除自定義事件監(jiān)聽器。 https://cn.vuejs.org/v2/api/#vm-off https://github.com/vuejs/vue/issues/3399
  * @method $emit 事件廣播, 觸發(fā)當(dāng)前實(shí)例上的事件。 https://cn.vuejs.org/v2/api/#vm-emit
  * @method $once 事件訂閱, 監(jiān)聽一個(gè)自定義事件，但是只觸發(fā)一次，在第一次觸發(fā)之后移除監(jiān)聽器。 https://cn.vuejs.org/v2/api/#vm-once
  */
  $on (...event) {
   eventHub.$on(...event)
  },
  $off (...event) {
   eventHub.$off(...event)
  },
  $once (...event) {
   eventHub.$emit(...event)
  },
  $emit (...event) {
   eventHub.$emit(...event)
  }
 }
}
注冊
//main.js
import BUS from './service/bus'
BUS(Vue)

  beforeDestroy () {
  //事件廣播
   this.$bus.$emit('testing', color)
  }

  created () {
  //事件訂閱
   this.$bus.$on('testing', (res) => { console.log(res) })
  },
  beforeDestroy () {
   this.$bus.$off('testing')
  }

 beforeCreate: function () {
  console.group('A組件 beforeCreate 創(chuàng)建前狀態(tài)===============》')
 },
 created: function () {
  console.group('A組件 created 創(chuàng)建完畢狀態(tài)===============》')
 },
 beforeMount: function () {
  console.group('x組件 beforeMount 掛載前狀態(tài)===============》')
 },
 mounted: function () {
  console.group('x組件 mounted 掛載結(jié)束狀態(tài)===============》')
 },
 beforeUpdate: function () {
  console.group('x組件 beforeUpdate 更新前狀態(tài)===============》')
 },
 updated: function () {
  console.group('x組件 updated 更新完成狀態(tài)===============》')
 },
 beforeDestroy: function () {
  console.group('x組件 beforeDestroy 銷毀前狀態(tài)===============》')
 },
 destroyed: function () {
  console.group('x組件 destroyed 銷毀完成狀態(tài)===============》')
 }