Vue Props传值
Props用于父组件向子组件传值
定义类型
// 定义一个接口,用来限制Teacher的属性
export interface Teacher {name: string;age: number;gender: string;
}export type teacherList = Teacher[];// 一个自定义类型
export type Teachers = Array<Teacher>;
父组件
<script lang="ts" setup name="App">import Person from './components/Person.vue'import { reactive, ref } from 'vue'import { type teacherList } from '@/types';let personList = reactive<teacherList>([{ name: '张三', age: 20, gender: '男' }, { name: '李四', age: 25, gender: '男' },{ name: '王五', age: 30, gender: '男' }])
</script><template><div class="container"><!-- <Person a="哈哈" :list="personList"/> -->// 不传list,让子组件显示默认数据<Person a="哈哈" /></div>
</template><style scoped>.container {display: flex;height: 100vh; /* 使容器占满整个屏幕高度 */}
</style>
子组件
<script lang="ts" setup name="Person">import { type teacherList } from '@/types';// let x = defineProps(['a', 'list'])// 要先声明才能打印// console.log(x.a)// 只接受// defineProps(['a', 'list'])// 接受+限制// defineProps<{list:teacherList}>()// 接受+限制+限制必要性+默认值withDefaults(defineProps<{list?:teacherList}>(), {// 默认值,这里的默认值也得是teacherList类型,而且是个函数list:() => [{name:'张三',age:20, gender:'男'},{name:'李四',age:25, gender:'女'}]})</script><template><div class="person"><!-- <h1>{{ a }}</h1> --><ul><li v-for="item in list" :key="item.name">{{ item.name }} - {{ item.age }}</li></ul></div></template><style scoped>
</style>相关文章:
Vue Props传值
Props用于父组件向子组件传值 定义类型 // 定义一个接口,用来限制Teacher的属性 export interface Teacher {name: string;age: number;gender: string; }export type teacherList Teacher[];// 一个自定义类型 export type Teachers Array<Teacher>;父组件 <scr…...
FreeSWITCH event_socket 配置从其他地址连接
FreeSWITCH 默认配置只能 在本机连接, 要从 其他ip连接, 需要如下配置: 1、修改event_socket.conf.xml 1 <configuration name"event_socket.conf" description"Socket Client">2 <settings>3 <param name"nat-map&…...
信息安全数学基础(19)同余式的基本概念及一次同余式
一、同余式概念 同余式是数论中的一个基本概念,用于描述两个数在除以某个数时所得的余数相同的情况。具体地,设m是一个正整数,a和b是两个整数,如果a和b除以m的余数相同,则称a和b模m同余,记作a≡b(mod m)。反…...
网关过滤器:Spring Cloud Gateway
在Java中,实现网关过滤器(Gateway Filter)通常与Spring Cloud Gateway相关。Spring Cloud Gateway是一个基于Spring Framework 5、Project Reactor和Spring WebFlux构建的API网关,它为微服务架构提供了一种简单而有效的方式来路由…...
力扣最热一百题——除自身以外数组的乘积
目录 题目链接:238. 除自身以外数组的乘积 - 力扣(LeetCode) 题目描述 示例 提示: 解法一:左右数组(小型动态规划) 实现思路 Java写法: 运行时间 C写法: 运行时…...
监控易监测对象及指标之:全面监控SQL Server数据库
随着企业信息化建设的深入,数据库作为核心数据资产的管理中心,其性能和稳定性直接关系到业务的连续性和企业的运营效率。SQL Server作为一款功能强大、性能稳定的关系型数据库管理系统,广泛应用于各类业务场景中。 为了确保SQL Server数据库的…...
计算机视觉的应用34-基于CV领域的人脸关键点特征智能提取的技术方法
大家好,我是微学AI,今天给大家介绍一下计算机视觉的应用34-基于CV领域的人脸关键点特征智能提取的技术方法。本文主要探讨计算机视觉领域中人脸关键点特征智能提取的技术方法。详细介绍了基于卷积神经网络模型进行人脸关键点提取的过程,包括使…...
What is new in .NET 8 and C#12
目录 What is new in .NET 8? .NET Aspire Core .NET Libraries Metrics软件度量 Networking Extension Libraries Garbage Collection Reflection Improvements Native AOT Support NET SDK What is new in C# 12 ? Primary Constructors Collection Expressio…...
基于R语言的统计分析基础:使用键盘输入数据
在R语言中,键盘输入数据是一种灵活且直接的数据获取方式,适用于处理小数据集或需要即时用户交互的场景。通常用于交互式数据探索和分析、临时数据处理、交互式图形绘制、脚本自动化中的用户交互、特定应用场景下的数据录入中。 比如利用readline()函数根…...
unity3d入门教程九
unity3d入门教程九 20.2播放音频20.3在代码中播放21.1延时调用21.2invoke API21.3消息调用22.1交互界面22.2添加canvas22.3canavas的位置22.4添加text 这里给一个资源网站,可以部分免费下载,音乐和音效超多,支持检索 爱给网 https://www.aige…...
着色器 简介
着色器(Shader)是运行在 GPU 上的小程序。这些小程序为图形渲染管线的某个特定部分而运行。从基本意义上来说,着色器只是一种把输入转化为输出的程序。着色器也是一种非常独立的程序,因为它们之间不能相互通信;它们之间…...
redis单点、主从、哨兵、集群的不同
redis哨兵模式有几个: 单点主从哨兵集群 区别 主从模式:读写分离。 哨兵模式:哨兵模式是在主从模式的基础上添加了故障检测和自动故障转移的功能。还是读写分离。 哨兵节点负责监控主节点和从节点的状态,并在主节点宕机时选举新…...
notepad++的json查看
json文件查看 因为接触到3dtile模型,所以经常需要和json打交道,但是很多模型是下面这种情况,不好阅读,所以可以使用notepad的插件查看 正常打开是这样的 加载notepad插件 搜索json下载安装就可以了 如果网络抽象,下载…...
基于无人机影像的可见光单木分割数据集-json格式
基于无人机影像的可见光单木分割数据集,共1700张影像,数据集大小3.6GB,分割标注采用标准json格式。 该数据集是一个专门用于基于无人机可见光影像进行单木分割的数据集,旨在帮助研究人员和开发者训练和评估基于深度学习的图像分割…...
毕业设计选题:基于ssm+vue+uniapp的捷邻小程序
开发语言:Java框架:ssmuniappJDK版本:JDK1.8服务器:tomcat7数据库:mysql 5.7(一定要5.7版本)数据库工具:Navicat11开发软件:eclipse/myeclipse/ideaMaven包:M…...
【毕业设计】基于 PHP 开发的社区交流系统
基于 PHP 开发的社区交流系统可以是一个论坛、博客平台或是问答网站等形式的在线平台,用于用户之间的互动交流。以下是一个简单的 PHP 社区交流系统的示例,包括用户注册、登录、发布帖子、回复帖子等功能。 技术栈 前端:HTML, CSS, JavaScr…...
RK3568 解决Ubuntu加载驱动模块报错以及开机启动如何自动加载模块
遇到问题是,当我在buildroot文件系统跑这个ko文件,是可以正常使用的,但是在Ubuntu上却跑不了,提示:insmod: ERROR: could not insert module analyze_inode.ko: Operation not permitted 参考其他博主的博客,其实只要添加sudo即可,可能是权限问题导致无法加载,这里记录…...
Fyne ( go跨平台GUI )中文文档-Fyne总览(二)
本文档注意参考官网(developer.fyne.io/) 编写, 只保留基本用法 go代码展示为Go 1.16 及更高版本, ide为goland2021.2 这是一个系列文章: Fyne ( go跨平台GUI )中文文档-入门(一)-CSDN博客 Fyne ( go跨平台GUI )中文文档-Fyne总览(二)-CSDN博客 Fyne…...
微服务常见面试题总结
文章目录 1 概念1.1 你对微服务是怎么理解的1.2 微服务带来了哪些挑战?1.3 说下微服务有哪些组件?🔥 2 注册中心2.1 注册中心有什么用?🔥2.2 SpringCloud可以选择哪些注册中心?2.3 说下Eureka 和 Nacos的区…...
汽车电子零部件(16):ZCU区域控制器
ZCU(Zone Control Unit,区域控制器),功能主要包括哦数据交互、信号控制及电力分配等,是智能网联汽车中不可或缺的关键组件,ECU负责车身、车门、车窗、天窗、车灯(外大灯、内氛围灯)、座椅(可能包括座椅音响)、雷达甚至后排娱乐系统等控制执行单元的集中化。 CCU(centr…...
反向工程与模型迁移:打造未来商品详情API的可持续创新体系
在电商行业蓬勃发展的当下,商品详情API作为连接电商平台与开发者、商家及用户的关键纽带,其重要性日益凸显。传统商品详情API主要聚焦于商品基本信息(如名称、价格、库存等)的获取与展示,已难以满足市场对个性化、智能…...
通过Wrangler CLI在worker中创建数据库和表
官方使用文档:Getting started Cloudflare D1 docs 创建数据库 在命令行中执行完成之后,会在本地和远程创建数据库: npx wranglerlatest d1 create prod-d1-tutorial 在cf中就可以看到数据库: 现在,您的Cloudfla…...
YSYX学习记录(八)
C语言,练习0: 先创建一个文件夹,我用的是物理机: 安装build-essential 练习1: 我注释掉了 #include <stdio.h> 出现下面错误 在你的文本编辑器中打开ex1文件,随机修改或删除一部分,之后…...
嵌入式学习笔记DAY33(网络编程——TCP)
一、网络架构 C/S (client/server 客户端/服务器):由客户端和服务器端两个部分组成。客户端通常是用户使用的应用程序,负责提供用户界面和交互逻辑 ,接收用户输入,向服务器发送请求,并展示服务…...
2025年渗透测试面试题总结-腾讯[实习]科恩实验室-安全工程师(题目+回答)
安全领域各种资源,学习文档,以及工具分享、前沿信息分享、POC、EXP分享。不定期分享各种好玩的项目及好用的工具,欢迎关注。 目录 腾讯[实习]科恩实验室-安全工程师 一、网络与协议 1. TCP三次握手 2. SYN扫描原理 3. HTTPS证书机制 二…...
mac 安装homebrew (nvm 及git)
mac 安装nvm 及git 万恶之源 mac 安装这些东西离不开Xcode。及homebrew 一、先说安装git步骤 通用: 方法一:使用 Homebrew 安装 Git(推荐) 步骤如下:打开终端(Terminal.app) 1.安装 Homebrew…...
作为测试我们应该关注redis哪些方面
1、功能测试 数据结构操作:验证字符串、列表、哈希、集合和有序的基本操作是否正确 持久化:测试aof和aof持久化机制,确保数据在开启后正确恢复。 事务:检查事务的原子性和回滚机制。 发布订阅:确保消息正确传递。 2、性…...
LangChain 中的文档加载器(Loader)与文本切分器(Splitter)详解《二》
🧠 LangChain 中 TextSplitter 的使用详解:从基础到进阶(附代码) 一、前言 在处理大规模文本数据时,特别是在构建知识库或进行大模型训练与推理时,文本切分(Text Splitting) 是一个…...
向量几何的二元性:叉乘模长与内积投影的深层联系
在数学与物理的空间世界中,向量运算构成了理解几何结构的基石。叉乘(外积)与点积(内积)作为向量代数的两大支柱,表面上呈现出截然不同的几何意义与代数形式,却在深层次上揭示了向量间相互作用的…...
年度峰会上,抖音依靠人工智能和搜索功能吸引广告主
上周早些时候举行的第五届年度TikTok World产品峰会上,TikTok推出了一系列旨在增强该应用对广告主吸引力的功能。 新产品列表的首位是TikTok Market Scope,这是一个全新的分析平台,为广告主提供整个考虑漏斗的全面视图,使他们能够…...
