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.使用响应式变量gametoy来存储游戏机名称和接收到的信息。

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>

五.效果

相关推荐
秋天的一阵风几秒前
Vue3探秘系列— 路由:vue-router的实现原理(十六-上)
前端·vue.js·面试
秋天的一阵风1 分钟前
Vue3探秘系列— 路由:vue-router的实现原理(十六-下)
前端·vue.js·面试
海底火旺21 分钟前
JavaScript中的Object方法完全指南:从基础到高级应用
前端·javascript·面试
海底火旺22 分钟前
JavaScript中的Symbol:解锁对象属性的新维度
前端·javascript·面试
天天扭码22 分钟前
一文吃透 ES6新特性——解构语法
前端·javascript·面试
Kagerou23 分钟前
组件测试
前端
JustHappy26 分钟前
啥是Hooks?为啥要用Hooks?Hooks该怎么用?像是Vue中的什么?React Hooks的使用姿势(上)
前端·vue.js·react.js
张可40 分钟前
历时两年半开发,Fread 项目现在决定开源,基于 Kotlin Multiplatform 和 Compose Multiplatform 实现
android·前端·kotlin
瓯雅爱分享43 分钟前
任务管理系统,Java+Vue,含源码与文档,科学规划任务节点,全程督办保障项目落地提效
java·mysql·vue·软件工程·源代码管理
培根芝士1 小时前
electron-updater实现自动更新
javascript·electron