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…...
linux之kylin系统nginx的安装
一、nginx的作用 1.可做高性能的web服务器 直接处理静态资源(HTML/CSS/图片等),响应速度远超传统服务器类似apache支持高并发连接 2.反向代理服务器 隐藏后端服务器IP地址,提高安全性 3.负载均衡服务器 支持多种策略分发流量…...
linux arm系统烧录
1、打开瑞芯微程序 2、按住linux arm 的 recover按键 插入电源 3、当瑞芯微检测到有设备 4、松开recover按键 5、选择升级固件 6、点击固件选择本地刷机的linux arm 镜像 7、点击升级 (忘了有没有这步了 估计有) 刷机程序 和 镜像 就不提供了。要刷的时…...
spring:实例工厂方法获取bean
spring处理使用静态工厂方法获取bean实例,也可以通过实例工厂方法获取bean实例。 实例工厂方法步骤如下: 定义实例工厂类(Java代码),定义实例工厂(xml),定义调用实例工厂ÿ…...
三体问题详解
从物理学角度,三体问题之所以不稳定,是因为三个天体在万有引力作用下相互作用,形成一个非线性耦合系统。我们可以从牛顿经典力学出发,列出具体的运动方程,并说明为何这个系统本质上是混沌的,无法得到一般解…...
12.找到字符串中所有字母异位词
🧠 题目解析 题目描述: 给定两个字符串 s 和 p,找出 s 中所有 p 的字母异位词的起始索引。 返回的答案以数组形式表示。 字母异位词定义: 若两个字符串包含的字符种类和出现次数完全相同,顺序无所谓,则互为…...
Vue ③-生命周期 || 脚手架
生命周期 思考:什么时候可以发送初始化渲染请求?(越早越好) 什么时候可以开始操作dom?(至少dom得渲染出来) Vue生命周期: 一个Vue实例从 创建 到 销毁 的整个过程。 生命周期四个…...
如何在Windows本机安装Python并确保与Python.NET兼容
✅作者简介:2022年博客新星 第八。热爱国学的Java后端开发者,修心和技术同步精进。 🍎个人主页:Java Fans的博客 🍊个人信条:不迁怒,不贰过。小知识,大智慧。 💞当前专栏…...
【java】【服务器】线程上下文丢失 是指什么
目录 ■前言 ■正文开始 线程上下文的核心组成部分 为什么会出现上下文丢失? 直观示例说明 为什么上下文如此重要? 解决上下文丢失的关键 总结 ■如果我想在servlet中使用线程,代码应该如何实现 推荐方案:使用 ManagedE…...
C++11 constexpr和字面类型:从入门到精通
文章目录 引言一、constexpr的基本概念与使用1.1 constexpr的定义与作用1.2 constexpr变量1.3 constexpr函数1.4 constexpr在类构造函数中的应用1.5 constexpr的优势 二、字面类型的基本概念与使用2.1 字面类型的定义与作用2.2 字面类型的应用场景2.2.1 常量定义2.2.2 模板参数…...
HTML中各种标签的作用
一、HTML文件主要标签结构及说明 1. <!DOCTYPE html> 作用:声明文档类型,告知浏览器这是 HTML5 文档。 必须:是。 2. <html lang“zh”>. </html> 作用:包裹整个网页内容,lang"z…...
