###
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 &#
39;
vue&#
39;
import App
from &#
39;
./App
.vue&#
39;
import mitt from &#
39;
mitt&#
39;
const eventBus =
mitt()
createApp(App)
.provide(&#
39;eventBus&#
39;, eventBus)
.mount(&#
39;#app&#
39;)
```
#### 封装 Hook 函数简化调用逻辑
为了让各个组件能够更加方便地接入这个基于
mitt 构建的消息机制，可以考虑编写自定义 hooks 来进一步抽象化操作流程[^2]。
```
javascript
// useEventBus
.js
export function useEventBus() {
const e
mitter = inject(&#
39;eventBus&#
39;);
return {
on: (eventName, handler) => e
mitter
.on(eventName, handler),
off: (eventName, handler) => e
mitter
.off(eventName, handler),
emit: (eventName, data) => e
mitter
.emit(eventName, data)
}
}
```
#### 组件内的具体运用场景展示
下面是一个简单的例子来说明如何利用上述设置完成两个不同层级组件之间数据交换的任务：
##### 发送方组件 (`Hello1
.vue`)
在这个示例里，点击按钮会触发向其他监听者发送一条带有参数的消息。
```html
<!-- Hello1
.vue -->
<template>
<button @click="sendMessage">Send Message</button>
</template>
<script setup lang="ts">
import { ref }
from &#
39;
vue&#
39;;
import { useEventBus }
from &#
39;@/hooks/useEventBus&#
39;;
const messageText = ref<string>(&#
39;Hello World!&#
39;);
const { emit } = useEventBus();
function sendMessage() {
emit(&#
39;message-event&#
39;, messageText
.value);
}
</script>
```
##### 接收方组件 (`App
.vue`)
接收来自子组件发出的信息，并更新视图显示最新收到的内容。
```html
<!-- App
.vue -->
<template>
<div id="app">
{{ receivedMessage }}
<hello1 />
</div>
</template>
<script setup lang="ts">
import hello1
from &#
39;
./components/Hello1
.vue&#
39;;
import { ref, onMounted, onUnmounted }
from &#
39;
vue&#
39;;
import { useEventBus }
from &#
39;@/hooks/useEventBus&#
39;;
let receivedMessage = ref(&#
39;&#
39;);
const { on: listenForMessages, off: stopListening } = useEventBus();
listenForMessages(&#
39;message-event&#
39;, (msg: string) => {
receivedMessage
.value = msg;
});
onUnmounted(() => {
stopListening(&#
39;message-event&#
39;);
});
</script>
```
通过这种方式，即使是在非父子关系链上的组件也可以轻松
实现实时的数据同步与交互功能[^4]。
扫一扫
3034
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
