vue3 使用mitt进行组件传值

### Vue3 使用 mitt 库实现组件间通信 #### 安装 mitt 库 为了在 Vue3 项目中使用 mitt 来处理组件之间的消息传递，首先需要安装 mitt 库。可以通过 npm 或 yarn 完成安装。 ```bash npm install mitt ``` 或者 ```bash yarn add mitt ``` #### 引入全局事件总线 接着，在项目的入口文件 `main.ts` 中创建并配置一个全局的事件总线实例，并将其挂载到 Vue 的原型上以便于在整个应用范围内访问[^1]。 ```typescript // main.ts import { createApp } from 'vue' import App from './App.vue' import mitt from 'mitt' const eventBus = mitt() createApp(App).provide('eventBus', eventBus).mount('#app') ``` #### 封装 Hook 函数简化调用逻辑 为了让各个组件能够更加方便地接入这个基于 mitt 构建的消息机制，可以考虑编写自定义 hooks 来进一步抽象化操作流程[^2]。 ```javascript // useEventBus.js export function useEventBus() { const emitter = inject('eventBus'); return { on: (eventName, handler) => emitter.on(eventName, handler), off: (eventName, handler) => emitter.off(eventName, handler), emit: (eventName, data) => emitter.emit(eventName, data) } } ``` #### 组件内的具体运用场景展示 下面是一个简单的例子来说明如何利用上述设置完成两个不同层级组件之间数据交换的任务： ##### 发送方组件 (`Hello1.vue`) 在这个示例里，点击按钮会触发向其他监听者发送一条带有参数的消息。 ```html <!-- Hello1.vue --> <template> <button @click="sendMessage">Send Message</button> </template> <script setup lang="ts"> import { ref } from 'vue'; import { useEventBus } from '@/hooks/useEventBus'; const messageText = ref<string>('Hello World!'); const { emit } = useEventBus(); function sendMessage() { emit('message-event', messageText.value); } </script> ``` ##### 接收方组件 (`App.vue`) 接收来自子组件发出的信息，并更新视图显示最新收到的内容。 ```html <!-- App.vue --> <template> <div id="app"> {{ receivedMessage }} <hello1 /> </div> </template> <script setup lang="ts"> import hello1 from './components/Hello1.vue'; import { ref, onMounted, onUnmounted } from 'vue'; import { useEventBus } from '@/hooks/useEventBus'; let receivedMessage = ref(''); const { on: listenForMessages, off: stopListening } = useEventBus(); listenForMessages('message-event', (msg: string) => { receivedMessage.value = msg; }); onUnmounted(() => { stopListening('message-event'); }); </script> ``` 通过这种方式，即使是在非父子关系链上的组件也可以轻松实现实时的数据同步与交互功能[^4]。