Vue3---基础7(Props)

        props,用于给子组件传递父组件的值的方法

代码示例:

父组件

<template><Text1 :list="personList"/>
</template><script lang="ts" setup namae="App">import Text1 from './components/text2.vue'import { reactive } from 'vue'import { type Persons }  from '@/types'let personList = reactive<Persons>([{id: '19821220', name:'张杰', age: 22},{id: '19822024', name:'Jason', age: 25},])</script>

我在父组件内,定义了数据 personList 数组,并在子组件上绑定了该数据

        

子组件

<template><div class="person"><h2>{{ list }}</h2><ul><li v-for="item in list" :key="item.id">姓名: {{ item.name }}; 年龄:{{ item.age }}</li></ul></div>
</template><script lang="ts" setup name="text2">import {defineProps, withDefaults} from 'vue'import { type Person } from '@/type'// 只接收list// defineProps(['list'])// 接收list + 限制类型// defineProps<{list:Person}>()// 接收list + 限制类型 + 限制必要性 + 制定默认值withDefaults(defineProps<{list:Person}>(), {list:()=> [{id: 111222, name: '默认姓名', age: 18}]})// 接收list  同时将 props 保存起来// let x = defineProps(['a', 'list'])// console.log('x', x)</script>

有四种方法去使用

第一种

        只接收值

第二种

        接收值,同时保持该值

第三种

        接收值的时候使用<>,限制类型

第四种

        接收值的时候,限制类型,限制必要性和设置默认值

defineProps

        是用来在子组件内去接收父组件的值

withDefaults

        在接收父组件的值时,给该值设置默认值

        需要用回调函数去返回该默认值,不能直接设置

        xxx:()=> {默认值}  

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

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

相关文章

AI Agent概念、能力初探

AI Agent无疑是大语言模型当前最热门且最具前景的方向&#xff0c;也是通往AGI的必经之路&#xff0c;下面我们从基本概念和系统能力层面来逐步揭开AI Agent的神秘面纱。 一、概念解析 1、什么是AI Agent&#xff1f; AI Agent&#xff08;人工智能代理&#xff09;是一种能够…

C++ 狼类(Wolf)、人类(Human)、狼人类(Werewolf)

C 实现 定义以下三个类; 狼类(Wolf):成员变量姓名:stringName&#xff0c;成员变量爪子锋利度:intShape&#xff0c;成员函数:voidPrintStateO&#xff0c;按照姓名、爪子锋利度格式输出两个成员变量的值。←人类(Human):成员变量姓名:stringName,成员变量智力:intIntell,成员函…

使用 ChatGPT-4 编码就像与一个醉酒的天才一起工作

我决定从头到尾使用 ChatGPT 来构建一个用于管理书签的 Chrome 扩展。在生成了 30,000 多行 JavaScript、HTML、CSS 和云后端后&#xff0c;我的收获是&#xff0c;使用 ChatGPT 进行编码就像与一个醉酒的编程天才一起工作&#xff1a;他很懒&#xff0c;患有记忆丧失&#xff…

[yotroy.cool]Haskell笔记二

个人博客https://www.yotroy.cool/&#xff0c;欢迎关注我哦&#xff5e; 类型 特性 强&#xff08;strong&#xff09;类型 静态&#xff08;static&#xff09; 可以通过自动推导&#xff08;automatically inferred&#xff09;得出 基本类型 Char Bool Int 常用 定长…

从零实现诗词GPT大模型:专栏内容规划

一、前情介绍 本系列文章将从头编写一个类GPT的深度学习模型&#xff0c;并在诗词数据集上进行训练&#xff0c;从而可以进行诗词创作。 本次实现的类GPT模型&#xff0c;可以在kaggle上使用免费GPU进行训练&#xff0c;并可以在自己的电脑上进行推理&#xff0c;整个学习过程…

洛谷刷题 深度优先搜索-[P1025]数的划分(C++)

题目描述 将整数 n 分成 k 份&#xff0c;且每份不能为空&#xff0c;任意两个方案不相同&#xff08;不考虑顺序&#xff09;。 例如&#xff1a;n7&#xff0c;k3&#xff0c;下面三种分法被认为是相同的。 1,1,5 1,5,1 5,1,1 问有多少种不同的分法。 输入格式 n,k &am…

三种定时任务:

三种定时任务&#xff1a; 1:Timer定时器 Timer定时器是Java内置的定时任务工具类&#xff0c;可以在指定的时间间隔内执行任务。 Timer中的任务是在Timer的任务线程中按照一定的时间间隔执行的&#xff0c;而TimerTask则是实际定时执行的任务。Timer和TimerTask都是线程安全…

《Java面试自救指南》(专题六)Java框架(含spring、Mybatis、Netty)

文章目录 力推的Java框架课程Spring的启动流程(IOC容器创建第一步)Spring IOC如何实现 (DefaultListAbleBeanFactory)Spring后置处理器怎么实现的?Spring AoP如何实现,有什么作用Spring监听器怎么实现的Spring事务传播机制有哪几种Spring Bean的注入方式Bean的生命周期和作…

mit MIT 6.S081 Operating System labs随记

lab 1 中 primes.c 写了一个递归&#xff0c;make qemu的时候会报error&#xff0c;error: infinite recursion detected [-Werrorinfinite-recursion]&#xff0c;导致编译无法通过。 解决办法&#xff1a; 在Makefile中&#xff0c;找到CFLAGS,找到 -Werror 选项并将其删除…

【App启动速度怎么做控制和优化】学习笔记

App的启动分为冷启动和热启动。以下讲述的是冷启动。 app启动时做了什么&#xff1f; main函数执行前 加载可执行文件&#xff08;.o文件集合&#xff09;加载动态连接库objc运行时初始化处理&#xff0c;包括objc相关类的注册、category的注册、selector唯一性检查等初始化&…

如何从零开始设计一套⌈中性策略回测系统⌋?

最近接到新任务&#xff0c;需要开发一套⌈中性策略回测系统⌋。 首先老实交待&#xff0c;策略方面&#xff0c;更多是投研部的工作&#xff0c;我不太懂。中性策略&#xff0c;平时工作中多多少少有些接触&#xff0c;全名为市场中性策略&#xff0c;我理解&#xff0c;凡是…

NAT技术

网络技术深似海呀&#xff0c;一段时间不用又忘。 是什么 NAT技术是网络防火墙技术的一部分&#xff0c;可以作用在linux防火墙或者设备防火墙&#xff0c;NAT技术可以实现地址和端口的转换&#xff0c;主要还是为了网络连通性。 作用 存在以下三个IP&#xff0c;A(10.234.…

cartographer代码学习-概率栅格地图(栅格地图的更新)

在cartographer中&#xff0c;地图的更新是很重要的一部分内容&#xff0c;如何将一帧一帧的激光点云转换成子图&#xff0c;则是其中的核心部分。 栅格地图的更新流程 根据前面所学&#xff0c;我们知道在local_trajectory_builder_2d中&#xff0c;函数在对点云预处理后调用…

LeetCode 热题 HOT 100(P31~P40)

系列文章&#xff1a; LeetCode 热题 HOT 100(P1~P10)-CSDN博客 LeetCode 热题 HOT 100(P11~P20)-CSDN博客 LeetCode 热题 HOT 100(P21~P30)-CSDN博客 LeetCode 热题 HOT 100(P31~P40)-CSDN博客 LC76minimum_window . - 力扣&#xff08;LeetCode&#xff09; 题目&…

自动化测试-web(PO:Page Object 模式)

一、PO模式 PO&#xff1a;Page Object&#xff08;页面对象&#xff09;&#xff0c;将自动化涉及的页面或模块封装成对象。 PO能解决什么问题&#xff1f; 代码复用性便于维护&#xff08;脚本层与业务分离&#xff09;--如果元素信息发生变化了&#xff0c;也不用去修改脚…

HOT100打卡—day12—【回溯】—最新24.4.14(剩好多题)

1 46. 全排列 46. 全排列 AC代码&#xff1a; class Solution { public:bool vis[22];vector<vector<int>> permute(vector<int>& nums) {vector<vector<int>> ans;vector<int> now;dfs(0,nums,now,ans);return ans;}void dfs(int …

leetcode经典困难题-接雨水

. - 力扣&#xff08;LeetCode&#xff09; 42. 接雨水 困难 相关标签 相关企业 给定 n 个非负整数表示每个宽度为 1 的柱子的高度图&#xff0c;计算按此排列的柱子&#xff0c;下雨之后能接多少雨水。 示例 1&#xff1a; 输入&#xff1a;height [0,1,0,2,1,0,1,3,2,1,…

c++的学习之路:22、多态(1)

摘要 本章主要是说一些多态的开头。 目录 摘要 一、多态的概念 二、多态的定义及实现 2.1、多态的构成条件 2.2、虚函数 2.3、虚函数的重写 2.4、C11 override 和 final 2.5、重载、覆盖(重写)、隐藏(重定义)的对比 三、思维导图 一、多态的概念 多态的概念&#…

HCIP实验:MGRE、星型拓扑

一、实验要求 1&#xff0c;R6为ISP只能配置IP地址&#xff0c;R1-R5的环回为私有网段 2&#xff0c;R1/4/5为全连的MGRE结构&#xff0c;R1/2/3为星型的拓扑结构&#xff0c;R1为中心站点 3&#xff0c;所有私有网段可以互相通讯&#xff0c;私有网段使用OSPF完成。 二、实验…

数字乡村创新实践探索农业现代化与农村治理现代化新路径:科技赋能农村全面振兴与农民幸福生活

目录 引言 一、数字乡村与农业现代化 1、智慧农业技术的应用 2、农业产业链的数字化转型 二、数字乡村与农村治理现代化 1、农村信息化水平的提升 2、农村治理模式的创新 三、科技赋能农村全面振兴与农民幸福生活 1、提升农业生产效益与农民收入 2、促进农村产业结构…