1、下载 mitt 包

npm i  mitt

2、创建 eventBus.js 文件

打开 eventBus,js 文件，进行如下的配置

// 1、导入 mitt 包
import mitt from 'mitt'

// 2、创建 eventBus 的实例对象
const bus = mitt()

// 3、将 eventBus 实例对象共享出去
export default bus

3、发送方配置

导入 eventBus.js 文件

import bus from 'eventBus.js 文件路径'

使用 bus.emit() 自定义事件

<template>
  <div class="text-container">
    <h1>Left 组件</h1>
    <hr>
    <button @click="add"> +1 -- 发送数据 -- </button> &nbsp;&nbsp; <span>{{count}} </span>
  </div>
</template>

<script>
// 导入模块，得到共享的 bus 对象
import bus from './eventBus'

export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    add() {
      this.count++

      // 使用 bus.emit 自定义事件
      bus.emit('count-change', this.count)
    }
  }
}
</script>

4、接收方配置

导入 eventBus.js 文件

import bus from 'eventBus.js 文件路径'

使用 bus.on() 注册自定义事件，通过事件处理函数的形参来接收数据 注意：bus.on() 是在 created() 生命周期函数中定义的

<template>
  <div class="text1-container">
    <h1>Right 组件</h1>
    <hr>

    <p>接收的数据是： {{num}}</p>
  </div>
</template>

<script>
// 导入模块，得到共享的 bus 对象
import bus from './eventBus'

export default {
  data() {
    return {
      num: 0
    }
  },
  created() {
    bus.on('count-change', count => {
      this.num = count
    })
  }
}
</script>

<style lang="less" scoped>
.text1-container {
  // display: flex;
  margin: 10px;
  background-color: yellow;
  min-width: 250px;
  flex: 1;
}
</style>