Typescript Vue3中的defineProps接收参数,并withDefaults设置默认值

1. defineProps:接收父组件传递的参数

2. withDefaults:接收时设置默认值

这两个api都不需要引入,可直接在setup中使用

1. person.vue接收参数

<script setup lang="ts">import type {Persons} from '@/types'// 接收list + 可不传defineProps(["list"])// 接收list + 限制类型 + 必传defineProps<{list:Persons}>()// 接收list + 限制类型 + 设置默认值 + 可不传withDefaults(defineProps<{list:Persons}>(),{// 数组类型必须使用函数返回,其它不用list:()=>[{name: '张三',age: 18,id:"adwa1234"}]})// 将Props收到的值保存起来,是一个对象let propsData = defineProps(["persons"])console.log(propsData.list);
</script>

2. App.vue传递参数

<script lang="ts" setup>let persons = [{name: '张三',age: 18,id:"adwa1234"
}, {name: '李四',age: 20,id:"afehgr48"
}, {name: '王五',age: 22,id:"imugk84"
}]</script><template><Person :list="persons" />
</template>

 3. type.ts 定义类型

export interface PersonInter {id:string,name:string,age:number
}
export type Persons = Array<PersonInter>

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

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

相关文章

springboot3 web

springboot web配置 springboot web的配置有&#xff1a; SpringMvc配置的前缀为&#xff1a;spring.mvcweb场景的通用配置为&#xff1a;spring.web文件上传的配置为&#xff1a;spring.servlet.multipart服务器相关配置为&#xff1a;server 接管SpringMVC 的三种方式 方…

【算法】无重复字符的最长子串

难度&#xff1a;中等 题目 给定一个字符串 s &#xff0c;请你找出其中不含有重复字符的 最长子串的长度。 示例&#xff1a; 示例1&#xff1a; 输入&#xff1a;s “abcabcbb” 输出&#xff1a;3 解释&#xff1a;因为无重复字符的最长子串是 “abc”&#xff0c;所以…

1.26、基于概率神经网络(PNN)的分类(matlab)

1、基于概率神经网络(PNN)的分类简介 PNN(Probabilistic Neural Network,概率神经网络)是一种基于概率论的神经网络模型,主要用于解决分类问题。PNN最早由马科夫斯基和马西金在1993年提出,是一种非常有效的分类算法。 PNN的原理可以简单概括为以下几个步骤: 数据输入层…

对LinkedList和链表的理解

一.ArrayList的缺陷 二.链表 三.链表部分相关oj面试题 四.LinkedList的模拟实现 五.LinkedList的使用 六.ArrayList和LinkedList的区别 一.ArrayList的缺陷: 1. ArrayList底层使用 数组 来存储元素&#xff0c;如果不熟悉可以来再看看&#xff1a; ArrayList与顺序表-CSDN…

2024年7月13日全国青少年信息素养大赛Python复赛小学高年级组真题

第一题 题目描述 握情况。他决定让每个人输入一个正整数 N (0≤N≤1000)&#xff0c;然后计算并输出(5*N)的值。请用 在一个神秘的王国里&#xff0c;国王希望通过一个简单的测试来评估他的子民对基 础数学运算的掌 Python 编写程序&#xff0c;程序执行后要求用户输入一个正…

Hash表(C++)

本篇将会开始介绍有关于 unordered_map 和 unordered_set 的底层原理&#xff0c;其中底层实现其实就是我们的 Hash 表&#xff0c;本篇将会讲解两种 Hash 表&#xff0c;其中一种为开放定址法&#xff0c;另一种为 hash 桶&#xff0c;在unordered_map 和 unordered_set 的底层…

智驭未来:人工智能与目标检测的深度交融

在科技日新月异的今天&#xff0c;人工智能&#xff08;AI&#xff09;如同一股不可阻挡的浪潮&#xff0c;正以前所未有的速度重塑着我们的世界。在众多AI应用领域中&#xff0c;目标检测以其独特的魅力和广泛的应用前景&#xff0c;成为了连接现实与智能世界的桥梁。本文旨在…

20240715 每日AI必读资讯

&#x1f310; 代号“ 草莓 ”&#xff0c;OpenAI 被曝研发新项目&#xff1a;将 AI 推理能力提至新高度 - OpenAI 公司被曝正在研发代号为“ 草莓 ”的全新项目&#xff0c;进一步延伸去年 11 月宣布的 Q* 项目&#xff0c;不断提高 AI 推理能力&#xff0c;让其更接近人类的…

基于Java的休闲娱乐代理售票系统

你好&#xff0c;我是专注于Java开发的码农小野&#xff01;如果你对系统开发感兴趣&#xff0c;欢迎私信交流。 开发语言&#xff1a;Java 数据库&#xff1a;MySQL 技术&#xff1a;Java技术、SpringBoot框架、B/S架构 工具&#xff1a;Eclipse IDE、MySQL数据库管理工具…

牛客小白月赛98 (个人题解)(补全)

前言&#xff1a; 昨天晚上自己一个人打的小白月赛&#xff08;因为准备数学期末已经写烦了&#xff09;&#xff0c;题目难度感觉越来越简单了&#xff08;不在像以前一样根本写不了一点&#xff0c;现在看题解已经能看懂一点了&#xff09;&#xff0c;能感受到自己在不断进步…

2024年是不是闰年?

闰年的由来 闰年的概念最早可以追溯到古罗马时期的朱利叶斯凯撒。当时的罗马历法是根据太阳年来制定的&#xff0c;每年大约有365.25天。为了使日历与季节保持同步&#xff0c;人们需要定期插入一个额外的日子。朱利叶斯凯撒在公元前46年颁布了一项法令&#xff0c;规定每四年增…

SAP PP学习笔记26 - User Status(用户状态)的实例,订单分割中的重要概念 成本收集器,Confirmation(报工)的概述

上面两章讲了生产订单的创建以及生产订单的相关内容。 SAP PP学习笔记24 - 生产订单&#xff08;制造指图&#xff09;的创建_sap 工程外注-CSDN博客 SAP PP学习笔记25 - 生产订单的状态管理(System Status(系统状态)/User Status(用户状态)),物料的可用性检查&#xff0c;生…

最长下降序列

如何理解这个题目呢,我们可以每个人的分数放到排名上&#xff0c;然后求解最长下降序列即可 #include<bits/stdc.h> using namespace std;int n; const int N (int)1e5 5; int a[N]; int b[N]; int d[N]; int dp[N]; int t;int main() {cin >> t;while (t--) {…

Java中Set集合

Set集合类似于数学中集合的概念&#xff0c;具有和数学中集合一样的唯一性&#xff08;就是说Set集合中的元素不能重复&#xff09;&#xff0c;在Java中我们最长使用的集合有HashSet、LinkedHashSet和TreeSet&#xff0c;这里最常使用的就是HashSet。 一、HashSet 1.HashSet的…

Apache Hadoop之历史服务器日志聚集配置

上篇介绍绍了Apache Hadoop的分布式集群环境搭建&#xff0c;并测试了MapReduce分布式计算案例。但集群历史做了哪些任务&#xff0c;任务执行日志等信息还需要配置历史服务器和日志聚集才能更好的查看。 配置历史服务器 在Yarn中运行的任务产生的日志数据不能查看&#xff0…

2024-07-13 Qt6.5版本后视频渲染

文章目录 前言一、先上代码1.将yuv/nv12等解码后的视频数据放入QVideoSink内2.将AVFrame数据保存进QVideoSink3.在qml中的显示4.同理,在widget中也可显示 二、QVideoFarme支持的格式三、说说渲染效率问题 前言 Qt 6版本中&#xff0c;视频播放能力得到了质的飞越&#xff0c;相…

【JavaScript】 变量提升和函数提升

变量提升 1. 允许在变量声明之前即被访问。 2. 在代码执行之前&#xff0c;把当前作用域中var声明的变量全部提到当前作用域的最前面。 3. 只提升声明&#xff0c;不提升赋值。 function fn(){console.log(num)var num 10 } 相当于以下代码&#xff1a; function fn(){…

Tomcat底层原理

Tomcat是一个开源的Java Servlet容器&#xff0c;它实现了Java Servlet和JavaServer Pages (JSP) 技术&#xff0c;用于运行Java Web应用。它是由Apache软件基金会开发和维护的。以下是对Tomcat底层原理的详细解析&#xff1a; 1. 启动流程 Tomcat的启动流程主要分为以下几个…

【计算机毕业设计】013新闻资讯微信小程序

&#x1f64a;作者简介&#xff1a;拥有多年开发工作经验&#xff0c;分享技术代码帮助学生学习&#xff0c;独立完成自己的项目或者毕业设计。 代码可以私聊博主获取。&#x1f339;赠送计算机毕业设计600个选题excel文件&#xff0c;帮助大学选题。赠送开题报告模板&#xff…

Python数据分析案例51——基于K均值的客户聚类分析可视化

案例背景 本次案例带来的是最经典的K均值聚类&#xff0c;对客户进行划分类别的分析&#xff0c;其特点是丰富的可视化过程。这个经典的小案例用来学习或者课程作业在合适不过了。 数据介绍 数据集如下: 客户的编码&#xff0c;性别&#xff0c;年龄&#xff0c;年收入&#…