Vue3：mitt实现组件通信

目录

一.性质

1.轻量级

2.单例

3.异步

4.事件绑定与解绑

二.作用

1.组件间通信

2.解耦

3.状态管理

4.事件的集中处理

三.使用

1.安装`mitt`

2.引入mitt；调用mitt；暴露mitt

3.组件1

4.组件2

四.代码

1.组件1

2.组件2

五.效果

---

一.性质

1.轻量级

mitt是一个非常轻量级的库，其主要目标是提供一个简单、高效、易于使用的事件总线。

2.单例

mitt通常被实例化为一个全局对象，这样可以确保在整个应用中只有一个实例，便于组件间共享。

3.异步

mitt支持异步事件处理，这意味着你可以注册事件处理器，当事件触发时，处理器可以异步执行。

4.事件绑定与解绑

允许组件注册事件处理器并随时解绑它们，以控制事件处理的生命周期。

二.作用

1.组件间通信

在Vue中，组件间通信通常通过props和事件实现。然而，当组件间的通信关系复杂，或者需要在多个组件间共享状态时，使用事件总线可以提供更灵活的解决方案。

2.解耦

通过事件总线，组件可以被解耦，即组件不需要直接引用其他组件，而是通过事件总线来传递信息，这有助于提高组件的复用性和可维护性。

3.状态管理

在大型应用中，事件总线可以作为状态管理的工具，帮助管理全局状态，尤其是当应用使用了如Vuex这样的状态管理库时，事件总线可以作为其补充，处理特定的事件流。

4.事件的集中处理

在某些场景下，可能需要对多个组件的事件进行集中处理，比如更新全局状态、触发全局操作等，事件总线提供了一个集中处理这些事件的中心点。

三.使用

1.安装`mitt`

控制台输入npm i mitt

2.引入mitt；调用mitt；暴露mitt

3.组件1

1.创建一个Vue组件，显示子组件1的标题、游戏机名称和收到的信息。

2.使用响应式变量game和toy来存储游戏机名称和接收到的信息。

3.通过监听send-toy事件来接收外部发送的信息，并将接收到的信息更新到toy变量中，从而在界面上显示出来。

4.组件2

响应式变量toy存储玩具名称，并使用自定义的emitter进行事件的触发和传递。

四.代码

1.组件1

<template><div class="father"><h4>子组件1</h4><h4>游戏机：{{ game }}</h4><h4>收到的信息:{{ toy }}</h4></div>
</template><script setup lang="ts" name="father">import { ref } from "vue";import emitter from "@/utils/emitter";let game = ref('ps5')let toy = ref('')// 绑定事件emitter.on('send-toy',(value:any)=>{console.log('send-toy事件被触发',value)toy.value = value})
</script><style>
.father{background-color: skyblue;
}
h4{margin-left: 20px;font-size: 20px;
}
button{width: 120px;height: 40px;font-size: 20px;margin-left: 20px;
}</style>

2.组件2

<template><div class="son"><h4>子组件2</h4><h4>玩具：{{ toy }}</h4><button @click="emitter.emit('send-toy',toy)">玩具</button></div>
</template><script setup lang="ts" name="son">import { ref } from "vue";import emitter from "@/utils/emitter";let toy = ref('变形金刚')</script><style>
.son{background-color: skyblue;
}h4{margin-left: 20px;font-size: 20px;
}
button{width: 120px;height: 40px;font-size: 20px;margin-left: 20px;
}</style>

五.效果