vue使用EventBus实现页面内组件通信

• EventBus是一种发布/订阅事件设计模式的实践。
• 在vue中适用于跨组件简单通信，不适应用于复杂场景多组件高频率通信，类似购物车等场景状态管理建议采用vuex

1.新建event-bus.js

export 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)
   }
  }
 }

2.在main.js内引入注册

import BUS from './event-bus'; // 同一页面的组件通信
BUS(Vue);

3.在需要使用的组件内使用

a组件：

// 触发事件
clickCom() {
  this.$bus.$emit("hand4", this.tit) 
},

b组件：

mounted() {
  // 监听
  this.$bus.$on('hand4', (data) => {
    this.txt2 = data;
  })
},
beforeDestroy() {
  // 移除事件监听
  this.$bus.$off('hand4');
}