vue3的mitt全局事件总线

vue3中的mitt，原理同vue2中的$bus全局事件总线

1. 安装mitt： npm install mitt

2. 创建emitter模块（@/utils/emitter.ts）

   import mitt from 'mitt';
   export default mitt();
   

3. 在组件A中监听事件（@/components/A.vue）

   <script setup lang="ts">
   import {onUnmounted} from 'vue';
   import emitter from '@/utils/emitter.ts';
   emitter.on('sendData', (value) => {
   	console.log('接收B组件发送的数据'：value);
   });
   onUnmounted(() => {
   	emitter.off('sendData');
   });
   </script>
   

4. 在组件B中触发事件（@/components/B.vue）

   <template>
   	<button @click="send">给组件A发送数据</button>
   </template>
   

   <script setup lang="ts">
   import emitter from '@/utils/emitter.ts';
   function send() {
   	emitter.emit('sendData', 'abc');
   }
   </script>