Vue3：mitt实现组件通信

QGC二次开发

已于 2024-09-23 09:54:24 修改

阅读量768

点赞数 6

分类专栏： Vue3 文章标签： vue.js javascript 前端 vue

于 2024-09-19 17:39:20 首次发布

本文链接：https://blog.youkuaiyun.com/qq_48597462/article/details/142362717

版权

Vue3 专栏收录该内容

24 篇文章

订阅专栏

2.引入mitt；调用mitt；暴露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>