Vue3：mitt实现组件通信
目录
一.性质
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>
五.效果
原文地址：https://blog.csdn.net/qq_48597462/article/details/142362717
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！