vue采用EventBus实现跨组件通信及注意事项小结

//src/service/bus.jsexport default (Vue) => { const eventHub = new Vue() Vue.prototype.$bus = { /**  * @param {any} event 第一个参数是事件对象，第二个参数是接收到消息信息，可以是任意类型  * @method $on 事件订阅, 监听当前实例上的自定义事件。https://cn.vuejs.org/v2/api/#vm-on  * @method $off 取消事件订阅，移除自定义事件监听器。 https://cn.vuejs.org/v2/api/#vm-off https://github.com/vuejs/vue/issues/3399  * @method $emit 事件广播, 触发当前实例上的事件。 https://cn.vuejs.org/v2/api/#vm-emit  * @method $once 事件订阅, 监听一个自定义事件，但是只触发一次，在第一次触发之后移除监听器。 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.jsimport 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 创建前状态===============》') }, created: function () {  console.group('A组件 created 创建完毕状态===============》') }, beforeMount: function () {  console.group('x组件 beforeMount 挂载前状态===============》') }, mounted: function () {  console.group('x组件 mounted 挂载结束状态===============》') }, beforeUpdate: function () {  console.group('x组件 beforeUpdate 更新前状态===============》') }, updated: function () {  console.group('x组件 updated 更新完成状态===============》') }, beforeDestroy: function () {  console.group('x组件 beforeDestroy 销毁前状态===============》') }, destroyed: function () {  console.group('x组件 destroyed 销毁完成状态===============》') }