【Vue3】Props的使用详解

💗💗💗欢迎来到我的博客,你将找到有关如何使用技术解决问题的文章,也会找到某个技术的学习路线。无论你是何种职业,我都希望我的博客对你有所帮助。最后不要忘记订阅我的博客以获取最新文章,也欢迎在文章下方留下你的评论和反馈。我期待着与你分享知识、互相学习和建立一个积极的社区。谢谢你的光临,让我们一起踏上这个知识之旅!
请添加图片描述

文章目录

  • 🍋介绍
  • 🍋回顾上节
  • 🍋props基本使用
  • 🍋优势
  • 🍋总结

🍋介绍

在Vue3中,Props是一种用于从父组件向子组件传递数据的重要机制。Props可以让我们以声明式的方式将数据传递到子组件,使得组件之间的通信更加简单和可靠。本文将详细介绍Vue3中Props的用法

🍋回顾上节

我们首先在根组件中编写下面的数组

let personList = [{id:'a01',name:'大馒头',age:18},{id:'a02',name:'馒头',age:19},{id:'a03)d03',name:'小馒头',age:22}]

但是这并不是响应式的数据,接下来我们引入reactive

  import {reactive} from 'vue'

但是这样子的话,我们如果在编写代码的时候打错了,也是不会产生错误的,这时候我们就需要用之前学到了接口那节了,Persons是自定义的

 import {type Persons} from '@/types'let personList = reactive<Persons>([{id:'asudfysafd01',name:'张三',age:18},{id:'asudfysafd02',name:'李四',age:20},{id:'asudfysaf)d03',name:'王五',age:22}])

🍋props基本使用

接下来我们介绍本文的重点

我们首先在根组件定义一个a,同时我们定义一个list

<person a="馒头" list="personList" />

这时候我们别忘了在子组件的模版里写,要不然是不会有显示的

    <h2>{{ a }}</h2><h2>{{ list }}</h2>

如果仅仅接受a和list的话

defineProps(['a','list'])

这样子运行后的界面如下图
在这里插入图片描述
但是这并不是我们想要的,我们想要的是Personlist的每一列数据,我们稍加修改

<person a="馒头" :list="personList" />

在这里插入图片描述
但是这样太丑了,我们在子组件中加点东西,下面的修改好的模版

v-for 是 Vue.js 提供的用来循环渲染列表的指令。通过 v-for,你可以遍历数组或对象,并为每个项或键值对执行相应的 DOM 操作

<template><div class="person"><ul><li v-for="i in list" :key="i.id">{{i.name}} - {{i.age}}</li></ul>
</div></template>

下图就是我们想要的展示了
在这里插入图片描述
但是只接受的话,根组件如果写错了,有可能发现不出来,并且在页面显示上会产生一定的问题,这就需要我们加一点限制了

  // 接收list + 限制类型defineProps<{list:Persons}>()

一旦出错会有提示
在这里插入图片描述
还有一种更高级的,设置了一个默认值,同时使用?用来限制必要性

  //  接收list + 限制类型 + 限制必要性 + 指定默认值withDefaults(defineProps<{list?:Persons}>(),{list:()=> [{id:'a04',name:'枣馒头',age:23}]})

注意:defineProps是一个用于定义组件 Props 的函数,它可以在组件的 setup 函数中直接使用,而无需导入

🍋优势

优点:

简洁明了: 使用 defineProps 可以在组件的 setup 函数中直接定义 Props,使得组件逻辑更加清晰和简洁类型推断: 在使用 defineProps 定义 Props 时,可以根据指定的类型进行类型推断,提高了代码的健壮性和可读性默认值和属性验证: 可以方便地指定 Props 的默认值和进行属性验证,确保组件的稳健性和可靠性无需导入: 使用 defineProps 不需要导入任何其他模块,可以直接在组件中使用,减少了代码的复杂性

缺点:

仅适用于 setup 函数: defineProps 只能在组件的 setup 函数中使用,如果组件逻辑较为复杂,可能会导致 setup 函数过于臃肿无法在模板中直接使用: 使用 defineProps 定义的 Props 不能直接在模板中使用,需要在 setup 函数中将其映射到返回的对象中才能在模板中使用

🍋总结

通过上述内容,我们可以看到在Vue3中如何使用Props来实现父子组件之间的数据传递,并掌握了Props的基本用法、属性验证、默认值设置等技巧。 Props是Vue3中非常重要的一个特性,熟练掌握Props的使用将有助于我们更好地构建可复用、灵活的组件

请添加图片描述

挑战与创造都是很痛苦的,但是很充实。

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

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

相关文章

概率基础——多元正态分布

概率基础——多元正态分布 介绍 多元正态分布是统计学中一种重要的多维概率分布&#xff0c;描述了多个随机变量的联合分布。在多元正态分布中&#xff0c;每个随机变量都服从正态分布&#xff0c;且不同随机变量之间可能存在相关性。本文将以二元标准正态分布为例&#xff0…

多线程JUC 第2季 中断线程

一 中断线程 1.1 中断概念 1.在java中&#xff0c;没有提供一种立即停止一条线程。但却给了停止线程的协商机制-中断。 中断是一种协商机制。中断的过程完全需要程序员自己实现。也即&#xff0c;如果要中断一个线程&#xff0c;你需要手动调用该线程的interrupt()方法&…

录制用户操作实现自动化任务

先上视频&#xff01;&#xff01; 流程自动化工具-录制操作绘制流程 这个想法之前就有了&#xff0c;趁着周末时间给它撸出来。 实现思路 从之前的文章自动化桌面未来展望中已经验证了录制绘制流程图的可行性。基于DOM录制页面操作轨迹的思路监听页面点击、输入事件即可&…

无人机镜头稳定的原理和相关算法

无人机的镜头稳定主要基于两个关键技术&#xff1a;镜头平衡技术和实时电子稳像。无人机镜头稳定的原理和相关算法主要是通过镜头平衡技术和实时电子稳像技术来保持摄像镜头的稳定性&#xff0c;从而拍摄出清晰、稳定的画面。无人机镜头稳定的原理主要是通过传感器和算法来实现…

Ocr之PaddleOcr模型训练

目录 一、系统环境 1 镜像拉取ppocr 进行部署 2 安装paddlepaddle 二、训练前的准备 1 下载源码 2 预模型下载 3 修改模型训练文件yml 4 编排训练集 5 执行脚本进行训练 6 需要修改文件夹名称 三、开始训练 1 执行训练命令 2 对第一次评估进行解释 3 引言 五、总…

NestJS使用模板引擎ejs

模板引擎​ 模板引擎是一种用于生成动态内容的工具&#xff0c;它通过将预定义的模板与特定数据结合&#xff0c;来生成最终的输出。​ 在NodeJS开发中&#xff0c;我们会使用模板引擎来渲染一些常用的页面&#xff0c;比如渲染代表404的Not Found 页面&#xff0c;502的Bad …

异常值检测-值域法 头歌代码解释

这关做得不是很明白&#xff0c;如果有清楚的同志可以在评论区里面讨论 import pandas as pd import numpy as np import matplotlib.pyplot as plt from sklearn.neighbors import LocalOutlierFactor # 导入数据 abc pd.read_csv(deaths.csv) ## 只分析其中的Population和L…

C语言对类型的转换

C语言对类型的转换 文章目录 C语言对类型的转换整形提升和截断整形提升整形提升规则整形提升的意义 截断截断规则 算数转换 我们都知道&#xff0c;C语言中内置了多种整形类型&#xff0c;占用空间从大到小&#xff0c;基本满足各类使用场景&#xff08;比如超长数字的运算就不…

【【C语言简单小题学习-1】】

实现九九乘法表 // 输出乘法口诀表 int main() {int i 0;int j 0;for (i 1; i < 9; i){for (j 1; j < i;j)printf("%d*%d%d ", i , j, i*j);printf("\n"); }return 0; }猜数字的游戏设计 #define _CRT_SECURE_NO_WARNINGS 1 #include<stdi…

源码视角,vue3为什么推荐用ref,而不是reactive

ref 和 reactive 是 Vue3 中实现响应式数据的核心 API。ref 用于包装基本数据类型&#xff0c;而 reactive 用于处理对象和数组。尽管 reactive 似乎更适合处理对象&#xff0c;但 Vue3 官方文档更推荐使用 ref。 我的想法&#xff0c;ref就是比reactive好用&#xff0c;官方也…

Java 中对包含关系的判断

本文将为您详细讲解 Java 中对包含关系的判断&#xff0c;包括数组、字符串等&#xff0c;并提供相应的代码例子。 1. 数组包含关系判断 在 Java 中&#xff0c;数组包含关系判断通常使用循环来实现。以下是几种常见的判断方法&#xff1a; 示例 1&#xff1a;使用 for…

Unity曲柄滑块四杆机构运动计算

一、运动效果 二、机构的介绍 曲柄长度&#xff1a;a&#xff0c;线段AB长度 连杆长度&#xff1a;b&#xff0c;线段BC长度 偏心距离&#xff1a;e&#xff0c;滑块轨迹与曲柄中心点A的垂直距离 三、已知点A点B和e的值&#xff0c;计算C点的位置 1、计算s的值 var h math.…

通过多进程并发方式(fork)实现服务器(注意要回收子进程)

以下内容为视频学习记录。 1、父进程accept后返回的文件描述符为cfd以及用于创建连接的lfd; 调用fork()创建子进程后&#xff0c;子进程继承cfd,lfd&#xff0c;通过该cfd与连接过来的客户端通信,lfd对子进程来说没用&#xff0c;可以直接close(lfd); 对于父进程来说&#x…

双非二本找实习前的准备day4

学习目标&#xff1a; 每天2-3到简单sql&#xff08;刷完即止&#xff09;&#xff0c;每天复习代码随想录上的题目3道算法&#xff08;时间充足可以继续&#xff09;&#xff0c;背诵的八股的问题也在这里记录了 今日碎碎念&#xff1a; 1&#xff09;偶尔还是贪玩游戏&…

Vue中的计算属性和方法有什么区别?

Vue.js是一款流行的JavaScript前端框架&#xff0c;提供了丰富的功能和便捷的开发方式。在Vue中&#xff0c;计算属性和方法是常用的两种方式来处理数据和逻辑。但它们之间存在一些区别&#xff0c;本文将详细介绍Vue中计算属性和方法的区别&#xff0c;并通过示例代码加深理解…

183896-00-6,Biotin-C3-PEG3-C3-NH2,可以选择性降解靶蛋白

您好&#xff0c;欢迎来到新研之家 文章关键词&#xff1a;183896-00-6&#xff0c;Biotin-C3-PEG3-C3-NH2&#xff0c;Biotin-C3-PEG3-C3-amine&#xff0c;生物素-C3-PEG3-C3-胺 一、基本信息 【产品简介】&#xff1a;Biotin-PEG3-C3-NH2是一种PROTAC linker&#xff0c;…

381. 有线电视网络(网络流,最小割,《算法竞赛进阶指南》)

381. 有线电视网络 - AcWing题库 给定一张 n 个点 m 条边的无向图&#xff0c;求最少去掉多少个点&#xff0c;可以使图不连通。 如果不管去掉多少个点&#xff0c;都无法使原图不连通&#xff0c;则直接返回 n。 输入格式 输入包含多组测试数据。 每组数据占一行&#xf…

Python推导式大全与实战:精通列表、字典、集合和生成器推导式【第115篇—python:推导式】

Python推导式大全与实战&#xff1a;精通列表、字典、集合和生成器推导式 Python语言以其简洁、优雅的语法而闻名&#xff0c;其中推导式是其独特之处之一。推导式是一种在一行代码中构建数据结构的强大方式&#xff0c;它涵盖了列表、字典、集合和生成器。本篇博客将全面介绍…

YOLOv8实例分割实战:ONNX模型转换及TensorRT部署

课程链接&#xff1a;https://edu.csdn.net/course/detail/39320 PyTorch版的YOLOv8支持高性能的实时实例分割。 TensorRT是针对英伟达GPU的加速工具。 ONNX &#xff08;Open Neural Network Exchange&#xff09; 作为一个开放的网络模型中间表示&#xff08;IR&#xff0…

Redis命令大全

通用命令 KEYS pattern&#xff1a;查找所有符合给定模式&#xff08;pattern&#xff09;的 key。EXISTS key&#xff1a;检查指定 key 是否存在。TYPE key&#xff1a;返回指定 key 的数据类型。DEL key [key …]&#xff1a;删除指定的 key。RENAME key newkey&#xff1a;…