什么?!这年代还有人用父子组件通信?

创作背景

因为本前端菜鸟写代码从没考虑过代码是否易于维护,所以一旦涉及组件通信,一律使用Pinia状态管理,至于父子组件通信啥的,学完Pinia之后就被我狠狠抛弃了,当时就在想:为什么不直接教Pinia,这玩意儿不是远比父子组件通信好用吗?

但是这几天研读黑马程序员大事件的代码居然发现了父子组件通信,为了完全读懂代码,打算前来复习,重拾被我扔掉的知识

代码研读

如下图所示,父组件需要向子组件传递标题信息,如“基本资料”

子组件关键代码

父组件关键代码

引入子组件

使用子组件并传值 

复习一下

Vue2选项式API中的父传子

看到这里我就疑惑了,为什么项目代码里接收父组件数据用的是defineProps,而PPT中只出现过props,于是我去问了AI,AI说:

这段代码使用的是 Vue 3 中的 Composition API 中的 defineProps 函数。在 Vue 3 中,使用 Composition API 时,可以使用 defineProps 来定义组件的 props。它类似于 Vue 2.x 中的 props 选项,但是在 Composition API 中使用更加灵活和直观。

通过 defineProps 定义的 props 具有类型检查、默认值等特性,并且可以更好地与其他 Composition API 功能集成,使得代码更易于理解和维护。在你提供的示例中,defineProps 用于定义一个名为 title 的 prop,其中 required 属性指定为 true,类型为 String。

这种方式可以让你在使用 Composition API 时更灵活地处理组件的 props,并且能够更好地利用 JavaScript 的特性来定义和验证 props。

好的,于是我又翻出Vue3组合式API的PPT

Vue3组合式API中的父传子

一些经验

由此,我也总结出了一些经验

其实父子组件通信还是有应用场景的,平时我们写进pinia数据仓库里的数据基本上是比较重要,且需要多个组件共同维护或者共享的数据,比如用户信息数据等,但是像今天代码中的例子,只涉及两个组件,且通信的数据也不是很重要,这个时候就完全没必要用pinia状态管理了

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

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

相关文章

YOLO-Worldv2两分钟快速部署

本次部署使用的框架基于ultralytics, 并且已经集成最新版本的YOLOv8框架: 一键环境配置 pip install ultralytics基础使用 训练 from ultralytics import YOLOWorld model YOLOWorld(yolov8x-worldv2.pt) results model.train(datacoco8.yaml, epo…

康谋技术 | 自动驾驶:揭秘高精度时间同步技术(一)

众所周知,在自动驾驶中,主要涵盖感知、规划、控制三个关键的技术层面。在感知层面,单一传感器采集外界信息,各有优劣,比如摄像头采集信息分辨率高,但是受外界条件影响较大,一般缺少深度信息&…

算法导论 总结索引 | 第三部分 第十四章:数据结构的扩张

1、通过存储 额外信息的方法来扩张一 种标准的数据结构,然后对这种数据结构,编写新的操作来支持所需的应用。因为添加的信息 必须要能被该数据结构上的常规操作更新和维护 2、通过扩张红黑树构造出的两种数据结构:14.1介绍 一种支持一般动态…

从迷茫到精通,小李的IPD培训‘逆袭’之路!——精益咨询

谈及IPD培训,这确实是一个让小李心生敬畏而又充满期待的词汇。作为刚刚踏上这段“奇幻”旅程的小白,小李深感其不仅是一场知识的狂欢,更是一次思维的洗礼和团队的熔炼。 IPD,全称集成产品开发,它代表着一种前沿的产品…

使用 Node.js 和 Azure Function App 自动更新 Elasticsearch 索引

作者:来自 Elastic Jessica Garson 维护最新数据至关重要,尤其是在处理频繁变化的动态数据集时。这篇博文将指导你使用 Node.js 加载数据,并通过定期更新确保数据保持最新。我们将利用 Azure Function Apps 的功能来自动执行这些更新&#xf…

云计算百科:类型、服务与业务优势一网打尽

了解云计算的权威指南是至关重要的,掌握云计算的类型、服务、用途以及它们如何为组织带来好处尤为重要。 假设某公司的员工正在办公室工作,突然间火警响起,原来IT部门的主服务器机房着火了,所有服务器都受到了影响。这一消息引发…

新一代企业共享服务中心,开启企业智慧管理决策新纪元

随着数字化浪潮加速来袭,企业面临着与以往全然不同的挑战与机遇。 业务与人员的增长致使服务请求与日俱增,业务类型愈加复杂,大量来自不同业务线的服务请求使内部服务压力增加。业务激增后只得依赖更多资源投入,势必掣肘服务效率。…

CSS函数: 实现数据限阈的数字函数

CSS函数中提供了几个比较实用的数字函数,它可以帮助我们实现一定的数学计算功能。常见的数字函数目前提供了五个:calc()、max()、min()和clamp()函数。其基本实现功能如下: calc():允许在声明 CSS 属性值时执行一些计算。max()&a…

eNSP学习——配置RIPv2认证

目录 主要命令 原理概述 实验目的 实验内容 实验拓扑 实验编址 实验步骤 1、基本配置 2、搭建RIP网络 3、模拟网络攻击 4、配置RIPv2简单验证 5、配置RIPv2 MD5密文验证 需要eNSP各种配置命令的点击链接自取:华为eNSP各种设备配置命令大全PD…

通过LabVIEW提升生产设备自动化水平

现代制造业对生产设备的自动化水平提出了越来越高的要求。使用LabVIEW这一强大的图形化编程环境,可以显著提升生产设备的自动化程度,改善生产效率和产品质量。本文将详细分析如何通过LabVIEW改善生产设备的自动化水平,并提供具体的实施策略与…

SpringBoot社区配送服务系统小程序-计算机毕业设计源码88705

摘要 随着科学技术的飞速发展,社会的方方面面、各行各业都在努力与现代的先进技术接轨,通过科技手段来提高自身的优势,社区当然也不例外。社区配送服务系统小程序是以实际运用为开发背景,运用软件工程原理和开发方法,采…

alist配合onlyoffice 实现在线预览

alist配合onlyoffice 实现在线预览 文章目录 alist配合onlyoffice 实现在线预览一、安装onlyoffice二、增加view.html文件三、安装nginx,并增加conf配置文件四、alist预览配置增加 一、安装onlyoffice 我是采用docker安装,采用的版本是7.2, …

安装Acunetix

Acunetix是一个自动化的Web应用程序安全测试工具,可以扫描任何可通过Web浏览器访问的和遵循HTTP/HTTPS规则的Web站点和Web应用程序,提供全面的漏洞扫描服务,并生成响应的报告 # 1. 安装 代码语言:javascript 复制 [rootwhcode…

高效管理近30万稳定运力,科技物流企业万联易达这样做

万联易达物流科技有限公司(以下简称“万联易达”),是由中泽集团投资设立的创新型物流科技企业。为提高平台数智化服务水平,提升业务开展效率,达到运输全场景合规化管理,万联易达平台引用法大大电子合同&…

在iPad上恢复丢失数据的3方法

iPad概览 iPad不仅可以用来看电影,还可以用来工作和学习。使用 Apple Pencil,您可以在 iPad 上做笔记、画画、制作音乐、编辑视频和在课堂上教学等。同时,由于体积小,您可以在商务旅行中轻松随身携带。因此,iPad已成为…

【成品设计】基于华大hc32F005c6ua的读取NFC卡

《基于华大hc32F005c6ua的读取NFC卡》 整体功能: 单片机:华大hc32F005c6ua 1、支持单片机spi接口读取nfc读卡器芯片rc522读写数据 2、读取到的数据可以通过单片机uart接口通信,上报给上位机(485主机) 3、uart接口支持modbus协议…

IntelliJ IDEA智能编程插件AI Assistant

IntelliJ IDEA集成开发工具最新版本提供了人工智能AI编程助手的插件,AI Assistant使用手册的文档地址是AI Assistant | IntelliJ IDEA Documentation AI Assistant提供以下的编程能力以及工具特性: 与AI Assistant聊天,提问与项目相关或者与…

门外汉一次过软考中级(系统集成项目管理工程师)秘笈,请收藏!

24上软考考试已经结束,24下软考备考又要开启了!今年软考发生了改革,很多考试由一年考两次变成了一年考一次,比如高级信息系统项目管理师,比如中级系统集成项目管理工程师,这两科是高、中级里相对简单&#…

YOLOv8+PyQt5非洲动物检测(可以重新训练,yolov8模型,从图像、视频和摄像头三种路径识别检测)

效果视频:非洲动物检测yolo检测(https://mbd.pub/o/bread/mbd-ZpaYk51q)_哔哩哔哩_bilibili 资源包含可视化的非洲动物检测系统,基于最新的YOLOv8训练的非洲动物检测模型,和基于PyQt5制作的可视化非洲动物检测系统&am…

免费的维吾尔语翻译器:维汉翻译通App,最近新增了什么功能呢?让我们一起来看看!好用的维语翻译工具支持语音评分功能、支持汉语查拼音等等。

“阿拉伯语是知识,波斯语是糖,印度语是盐,而维吾尔语则是艺术。” 这是一句流传在西域的古老谚语,它不仅道出了维吾尔语言的独特魅力,也表达了人们对语言艺术的无限热爱。 而今,我们带着这份热爱&#x…