送你一匹马：全局事件通信小车

0. 缘起

看组长写的代码里，出现了一处baseEventBus，好奇这个东西是什么，看了下作用，竟然是传递值到某个组件。这个跨组件通信的方法很有趣，之前看书看到过，不过写法没有这个版本的优雅，于是记录一下。

1. 小车用法

1.1 创建小车

/utils/index.js

 import Vue from 'vue'
 /* 全局事件总线 */
  Vue.prototype.$baseEventBus = new Vue();

1.2 挂载小车

/main.js

// Import deliverBUs
import './utils/index'

1.3 老爹使用小车发送emit

父组件

    handleClick() {
      this.msg++;
      this.$baseEventBus.$emit(
        "deliverToSon",
        "deliver to son From Father---" + this.msg
      );
    },

1.4 儿子接收on

子组件

  mounted() {
    this.$baseEventBus.$on("deliverToSon", (data) => {
      this.msg = data;
      this.handleClick();
    });
  },
  methods: {
    handleClick() {
      this.$message.info(`This is ${this.msg}`, 1000);
    },
  },

1.5 取消监听

父组件

  beforeDestroy() {
    //移除监听事件
    this.$baseEventBus.$off("deliverToSon");
  },

参考

6. vue篇之事件总线（EventBus） · vue.js · 看云 (kancloud.cn)