【Vue】Vue3.0(二十)Vue 3.0 中mitt的使用示例

上篇文章 【Vue】Vue3.0(十九)Vue 3.0 中一种组件间通信方式-自定义事件

🏡作者主页:点击!

🤖Vue专栏:点击!

⏰️创作时间:2024年11月11日12点23分

文章目录

      • 一、mitt 在示例代码中的使用解释
      • 二、新的`mitt`使用示例

一、mitt 在示例代码中的使用解释

在给定的代码中,mitt库(这里假设emitter是基于mitt创建的实例)用于实现组件间的事件通信。

  1. Child1.vue中的使用
<button @click="emitter.emit('send - toy', toy)">玩具给弟弟</button>

这里使用emitter.emit触发了一个名为send - toy的事件,并将toy的值作为参数传递。emitter是从@/utils/emitter引入的,它是基于mitt创建的事件发射器。这意味着Child1组件在按钮点击时,会发送一个事件,通知其他组件有玩具要传递的信息。

  1. Child2.vue中的使用
emitter.on('send - toy', (value: any) => {toy.value = value;
});
onUnmounted(() => {emitter.off('send - toy');
});
- `emitter.on('send - toy',...)`:通过`on`方法监听`send - toy`事件。当`send - toy`事件被触发时,回调函数会被执行,将接收到的值赋给`toy`。这样,`Child2`组件就能接收到`Child1`组件发送的玩具信息。
- `onUnmounted(() => { emitter.off('send - toy'); })`:在`Child2`组件卸载时,使用`off`方法解绑`send - toy`事件。这是一种良好的实践,可以防止内存泄漏和不必要的事件监听。

效果:
child1没有给child2的时候
在这里插入图片描述
给了之后:
在这里插入图片描述

二、新的mitt使用示例

假设我们有一个简单的待办事项应用,有一个TodoList组件和一个TodoItem组件,当TodoItem完成时,需要通知TodoList更新完成事项的数量。

  1. 创建emitter.js(基于mitt
import mitt from'mitt';export default mitt();
  1. TodoItem.vue组件
<template><div class="todo-item"><input type="checkbox" v-model="isCompleted" @change="toggleCompleted"><!-- 下面这行有一个坑的存在,这里需要判断父传过来的todo是否为空,如果为空的时候不去取text,否则的话会报错 --><span v-if="todo">{{ todo.text }}</span>  </div></template><script setup lang="ts"  name='todoItem'>import emitter from '@/utils/emitter';import { ref } from 'vue';interface Todo {text: String;}const props = defineProps<{todo: Todo;}>();const isCompleted = ref(false);const toggleCompleted = () => {//这里会根据子项的选中与否的状态来触发父组件中的完成数量的增减if (isCompleted.value) {emitter.emit('todo-completed');}else{emitter.emit('undo-completed');}};</script><style scoped>.todo-item {display: flex;align-items: center;margin: 5px;}</style>

TodoItem组件中,当复选框的状态变为完成(isCompletedtrue)时,通过emitter.emit('todo - completed')触发todo - completed事件。

  1. TodoList.vue组件
<template><div class="todo-list"><h2>待办事项列表</h2><TodoItem v-for="todo in todos" :key="todo.text" :todo="todo" /><p>已完成事项数量: {{ completedCount }}</p></div></template><script setup lang="ts" name='todoList'>import TodoItem from './TodoItem.vue';import emitter from '@/utils/emitter';import { ref } from 'vue';const todos = ref([{ text: '学习 Vue3' },{ text: '阅读书籍' },{ text: '锻炼身体' }]);const completedCount = ref(0);//监听子组件触发的数量增加emitter.on('todo-completed', () => {completedCount.value++;});//监听子组件触发的数量减少emitter.on('undo-completed', () => {completedCount.value--;});</script><style scoped>.todo-list {background-color: lightgray;padding: 10px;}</style>

TodoList组件中,使用emitter.on('todo - completed',...)监听todo - completed事件。每当TodoItem组件中的某个待办事项完成并触发该事件时,completedCount就会增加,从而更新已完成事项的数量显示。这样,通过mitt实现了组件之间的事件通信,让TodoList组件能够对TodoItem组件的状态变化做出响应。

效果
在这里插入图片描述
代码仓库:https://gitee.com/zhai_jiahao/vue3_learn

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/469357.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

显示器接口种类 | 附图片

显示器接口类型主要包括VGA、DVI、HDMI、DP和USB Type-C等。 VGA、DVI、HDMI、DP和USB Type-C 1. 观察 VGA接口:15针 DP接口&#xff1a;在DP接口旁&#xff0c;都有一个“D”型的标志。 电脑主机&#xff1a;DP(D) 显示器&#xff1a;VGA(15针) Ref https://cloud.tenc…

什么是数据平台?10 个值得了解的大数据平台示例

目前尚不清楚普通的 “数据” 是何时变成了 “大数据”。后一个术语可能起源于 20 世纪 90 年代的硅谷推介会和午餐室。更容易确定的是数据在 21 世纪是如何爆炸式增长的&#xff08;据估计&#xff0c;到 2025 年&#xff0c;人类每天将产生 463 EB的数据&#xff09;&#xf…

2024最新版JavaScript逆向爬虫教程-------基础篇之Chrome开发者工具学习

目录 一、打开Chrome DevTools的三种方式二、Elements元素面板三、Console控制台面板四、Sources面板五、Network面板六、Application面板七、逆向调试技巧7.1 善用搜索7.2 查看请求调用堆栈7.3 XHR 请求断点7.4 Console 插桩7.5 堆内存函数调用7.6 复制Console面板输出 工欲善…

Local Dimming和Mini LED简介

文章目录 Local Dimming和Mini LED的介绍区别和联系联系区别总结 Local Dimming和Mini LED的介绍 电视显示技术中的Local Dimming和Mini LED都是用于提升画面质量的背光技术&#xff0c;主要目的是增强对比度和改善黑色表现。以下是对它们的详细介绍&#xff1a; Local Dimmin…

VSCode中python插件安装后无法调试

问题 VSCode中python插件安装后无法调试&#xff0c;如下&#xff0c;点击调试&#xff0c;VScode中不报错&#xff0c;也没有调试 解决方法 1、查看配置 打开所在路径 2、拷贝 将整个文件夹拷贝到vscode默认路径下 3、问题解决 再次调试&#xff0c;可以正常使用了…

前端知识点---选择输入框confirm(Javascript)

文章目录 1. 基本用法2. 功能特点①阻塞行为&#xff1a;confirm 对话框会阻塞脚本的执行&#xff0c;直到用户作出选择。②简单交互&#xff1a;主要用于简单的确认操作&#xff0c;不支持自定义样式或多种交互。③ 示例 3 注意事项4 常见用途 1. 基本用法 let result confi…

android studio 配置过程

Android studio版本&#xff1a;Android Studio Ladybug | 2024.2.1 windows 10 x64 关键问题解决方法&#xff1a; 1.设置代理&#xff1a; 退出首次配置&#xff0c;进入ide&#xff08;必要时新建工程&#xff09;然后&#xff1a; 然后重启ide 等待下载完成。 代理地…

[Docker#4] 镜像仓库 | 部分常用命令

目录 什么是 Docker Registry 镜像仓库生活案例 镜像仓库分类 镜像仓库工作机制 常用的镜像仓库 私有仓库 镜像仓库命令 镜像命令[部分] 容器命令[部分] 什么是 Docker Registry 定义&#xff1a;Docker Registry 负责存储、管理和分发镜像&#xff0c;并提供了登录认…

【数据结构】线性表——链表

写在前面 本篇笔记记录线性表——链表的主要形式&#xff0c;虽然链表有8种形式&#xff0c;但是只要精通笔记中编写的两种&#xff0c;即可触类旁通。 文章目录 写在前面一、链表的概念及结构二、链表的分类三、无头单向非循环链表3.1、链表的实现3.1.1、链表的结构体定义3.1…

android studio导入OpenCv并改造成.kts版本

1.下载opencv Android版本 2.解压导入android studio,我这里是先导入低版本的,还是gradle,直接导入module,我这里是4.2.0的版本 我的as版本是Android Studio Electric Eel 2022.1.1 Patch 2,我导入直接就能用 //load OpenCV engine and init OpenCV library //这里放在oncreat…

大模型开发整体流程 基于个人知识库的问答助手 项目流程架构解析

一、大模型开发整体流程 1. 何为大模型开发 定义核心点核心能力 2. 大模型开发的整体流程 1. 设计2. 架构搭建3. Prompt Engineering4. 验证迭代5. 前后端搭建 二、项目流程简析 步骤一&#xff1a;项目规划与需求分析 1.项目目标2.核心功能3.确定技术架构和工具 步骤二&#…

超详细:三大范式和反范式设计详解

目录 1、三大范式 第一范式&#xff1a; 列不可再分 。 第二范式&#xff1a; 行可以唯一区分 第三范式&#xff1a;确保数据的完整性、减少数据冗余和避免更新异常。 反方式模式 实验数据&#xff1a;模拟两张百万量级的数据表 反范式优化实验对比 反范式存在的问题 &am…

Python 实现阿里滑块全攻略

阿里划块技术为开发者提供了高精度的视觉分割能力&#xff0c;而 Python 作为一种简洁高效的编程语言&#xff0c;可以轻松调用阿里划块接口&#xff0c;实现各种场景下的图像分割需求。 Python 调用阿里云分割抠图 - 商品分割接口的步骤如下&#xff1a;首先&#xff0c;开通…

尤雨溪都点赞的测试工具,你还不用?

尤雨溪都点赞的测试工具&#xff0c;你还不用&#xff1f; 想要一个跨浏览器兼容、无闪退的测试体验&#xff1f;Playwright来了&#xff01;它不仅支持主流浏览器自动化&#xff0c;还能轻松跨平台&#xff0c;让你轻松构建可靠的端到端测试。本文带你了解Playwright的功能亮点…

「IDE」VS2022插件 Visual Assist X 番茄助手介绍说明

✨博客主页何曾参静谧的博客📌文章专栏「IDE」集成开发环境📚全部专栏「Win」Windows程序设计「IDE」集成开发环境「UG/NX」BlockUI集合「C/C++」C/C++程序设计「DSA」数据结构与算法「UG/NX」NX二次开发「QT」QT5程序设计「File」数据文件格式「UG/NX」NX定制开发「Py」Py

qt QFrame详解

1、概述 QFrame是Qt框架中用于提供框架或边框的控件&#xff0c;主要用于在图形用户界面&#xff08;GUI&#xff09;中创建框架&#xff0c;并提供各种边框样式和功能。它是Qt中一个基础的容器类&#xff0c;也是许多基础控件的基类&#xff0c;可以被QLCDNumber、QToolBox、…

数据重塑:长宽数据转换【基于tidyr】

在数据分析和可视化过程中&#xff0c;数据的组织形式直接影响着我们能够进行的分析类型和可视化效果。这里简单介绍两种常见的数据格式&#xff1a;长格式&#xff08;Long Format&#xff09;和宽格式&#xff08;Wide Format&#xff09;&#xff0c;以及如何使用tidyr包进行…

【网络】应用层——HTTP协议

> 作者&#xff1a;დ旧言~ > 座右铭&#xff1a;松树千年终是朽&#xff0c;槿花一日自为荣。 > 目标&#xff1a;了解什么是HTTP协议。 > 毒鸡汤&#xff1a;有些事情&#xff0c;总是不明白&#xff0c;所以我不会坚持。早安! > 专栏选自&#xff1a;网络 &g…

【安全测试】sqlmap工具(sql注入)学习

前言&#xff1a;sqimap是一个开源的渗透测试工具&#xff0c;它可以自动化检测和利用SQL注入缺陷以及接管数据库服务器的过程。它有一个强大的检测引擎&#xff0c;许多适合于终极渗透测试的小众特性和广泛的开关&#xff0c;从数据库指纹、从数据库获 取数据到访问底层文件系…

【Android】webview常用方法和使用

文章目录 前言一、常见用法二、基础属性webView的常用方法WebViewClient的常用方法WebChromeClient的常用方法WebSettings的相关方法 三、加载流程和事件回调四、webview和JS之间的互相调用总结 五、参考链接 前言 最近项目又用到了webview&#xff0c;在回顾复习一次webview相…