Vue3.0总线程bus.js使用（mitt）

vue 3.0 移除了 $ on，$ off 和 $ once 方法，$emit 仍然是现有 API 的一部分，因为它用于触发由父组件以声明方式附加的事件处理程序.那么我们该如何处理简单的兄弟组件间的数据传输呢！
官方推荐使用的第三方库：mitt
1.引入

npm install --save mitt

2.创建bus.js并写入一下代码（建议存放在与main同一目录）

import mitt from "mitt";
const bus = {};
const emitter = mitt();
bus.$on = emitter.on;
bus.$off = emitter.off;
bus.$emit = emitter.emit;

export default bus

3.在main全局引入或者使用的组件中引入

import Bus from './bus.js'/// mitt 总线程引入
Vue.prototype.bus = Bus;

4.使用

A组件
<template>
  <div>
    <div @click="testFn">
      测试一下
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
    }
  },
  methods: {
    testFn() {
      // 如果有参数传入则this.bus.$emit('getParams'，params)
      this.bus.$emit('getParams')
    }
  }
}
</script>

B组件
<template>
  <div>
    {{val}}
  </div>
</template>

<script>
export default {
  data() {
    return {
      val: 1
    }
  },
  methods: {},
  mounted() {
    this.bus.$on('getParams', (params) => {
      console.log(params)
      this.val += 1
    })
  }
}
</script>