vue3的mitt全局事件总线

本文主要是介绍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>
   

这篇关于vue3的mitt全局事件总线的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---