vue3之Prop特性注意点

1、Ts中接收父组件传递参数prop的定义写法:

<script setup lang="ts">defineProps<{title?: stringlikes?: number}>()
</script>

2、所有的 props 都遵循着单向绑定原则,props 因父组件的更新而变化,子组件中不能赋值更改。否则控制台上向你抛出警告!

想要没有告警,通常子组件中prop用法:

//prop作为初始值,重新定义一个响应式变量给这个prop作为初始值
1.	const counter = ref(props.initialCounter)
//使用计算属性也可以,看使用场景
3.	const normalizedSize = computed(() => props.size.trim().toLowerCase())

3、Prop 校验

官方例子(一目了然):

defineProps({// 基础类型检查// (给出 `null` 和 `undefined` 值则会跳过任何类型检查)propA: Number,// 多种可能的类型propB: [String, Number],// 必传,且为 String 类型propC: {type: String,required: true},// Number 类型的默认值propD: {type: Number,default: 100},// 对象类型的默认值propE: {type: Object,// 对象或数组的默认值// 必须从一个工厂函数返回。// 该函数接收组件所接收到的原始 prop 作为参数。default(rawProps) {return { message: 'hello' }}},// 自定义类型校验函数// 在 3.4+ 中完整的 props 作为第二个参数传入propF: {validator(value, props) {// The value must match one of these stringsreturn ['success', 'warning', 'danger'].includes(value)}},// 函数类型的默认值propG: {type: Function,// 不像对象或数组的默认,这不是一个// 工厂函数。这会是一个用来作为默认值的函数default() {return 'Default function'}}
})

校验选项中的 type 支持以下原生构造函数:

• String • Number • Boolean • Array • Object • Date • Function• Symbol • Error

也可自定义的类或构造函数:

class Person {constructor(firstName, lastName) {this.firstName = firstNamethis.lastName = lastName}
}
defineProps({author: Person
})

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

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

相关文章

基于 Vue3 学习状态管理器:pinia

pinia 基本概念 Pinia 是 Vue 的存储库&#xff0c;Pinia和Vuex一样都是是vue的全局状态管理器&#xff0c;它允许跨组件/页面共享状态。实际上&#xff0c;其实Pinia就是Vuex5&#xff0c;官网也说过&#xff0c;为了尊重原作者&#xff0c;所以取名 pinia&#xff0c;而没有…

raylib库在CodeBlocks上的配置

raylib下载 raylib | A simple and easy-to-use library to enjoy videogames programming CodeBlocks

监控易对多云平台的运维管理方案

随着企业信息化建设的不断深入&#xff0c;越来越多的企业开始采用多云策略&#xff0c;以充分利用不同云服务提供商的优势&#xff0c;实现业务的高可用性、灵活性和成本效益。然而&#xff0c;多云环境也带来了运维管理的复杂性&#xff0c;如何有效监控和管理多个云平台的资…

本地部署websocket服务端并结合内网穿透实现固定公网地址连接

文章目录 1. Java 服务端demo环境2. 在pom文件引入第三包封装的netty框架maven坐标3. 创建服务端,以接口模式调用,方便外部调用4. 启动服务,出现以下信息表示启动成功,暴露端口默认99995. 创建隧道映射内网端口6. 查看状态->在线隧道,复制所创建隧道的公网地址加端口号7. 以…

CGAL 5.6.1 - Algebraic Foundations

1. 引言 CGAL 的目标是精确计算非线性对象&#xff0c;特别是定义在代数曲线和曲面上的对象。因此&#xff0c;表示多项式、代数扩展和有限域的类型在相关的实现中扮演着更加重要的角色。为了跟上这些变化&#xff0c;我们引入了这个软件包。由于引入的框架必须特别支持多项式…

【杂言】迟到的 2024 展望

研一下开学已有半月&#xff0c;本来想在家写的新年展望拖到了现在。翻看 2021 年的展望&#xff0c;我发现 flag 基本达成了&#xff08;除了 12 点睡觉&#xff09;&#xff0c;所以给新的一年立下大方向也是很有必要的。也许等到 60 岁我再回看&#xff0c;也是一件趣事吧。…

docker常见命令

命令 说明 docker pull 拉取镜像 docker push 推送镜像到DockerRegistry docker images 查看本地镜像 docker rmi 删除本地镜像 docker run 创建并运行容器&#xff08;不能重复创建&#xff09; docker stop 停止指定容器 docker start 启动指定容器 docker r…

15、技巧之八: 如何确认WebDriver支持哪个版本的Xpath?【Selenium+Python3网页自动化总结】

Firefox目前支持XPath 1.0版本&#xff0c;目前没有计划支持XPath 2.0版本。 曾经想知道给定的WebDriver支持哪个版本的XPath吗&#xff1f;我们当然希望是2.0或3.0版本&#xff0c;但最可能的版本是1.0。正如Selenium维基所述&#xff0c;WebDriver在可能的情况下使用浏览器的…

window环境下使用k8s部署.net core项目

前提&#xff1a;已经部署镜像到Docker 在项目发布目录下新建.yaml文件&#xff0c;内容如下&#xff08;以下仅举例出两种方式内容&#xff0c;可按需自由配置&#xff09; --方式一(创建deployment 、服务、指定命名空间) # ------------------- 注意层级结构&#xff0c;…

如何下载网页中嵌套的PDF

项目场景&#xff1a; 网页中常有发布的PDF文件&#xff0c;只有浏览功能 问题描述 想下载的话有时候会截图&#xff0c;或者联系网站管理员 解决方案&#xff1a; 1.使用谷歌浏览器或者360浏览器极速模式&#xff0c;在当前页面按F12 2.网络&#xff08;Network&#xff09;…

OpenSSL 安全漏洞(CVE-2023-3817)

厂商补丁: 目前厂商已发布升级补丁以修复漏洞&#xff0c;补丁获取链接&#xff1a; https://www.openssl.org/news/secadv/20230731.txt OpenSSL安全建议[2023年7月31日] 检查DH q参数值花费过多时间(CVE-2023-3817) 严重程度:低 问题总结:DH键或参数过长可能导致检查速度很…

电脑远程桌面选项变成灰色没办法勾选怎么办?

有些人在使用Windows系统自带的远程桌面工具时&#xff0c;会发现系统属性远程桌面选项卡中勾选启用“允许远程连接到此计算机”。 导致此问题出现的原因主要是由于组策略或者注册表设置错误造成的。 修复远程桌面选项变灰的两种方法&#xff01; 方法一&#xff1a;设置本地组…

从spark streaming与structured streaming看spark core与spark sql的区别

导读 Spark中针对流式数据处理的方案有&#xff1a; Spark StreamingStructured Streaming 本文通过对比spark streaming与structured streaming&#xff0c;来深入理解spark core与spark sql的区别。 Spark Streaming 基于微批(DStream) Spark Streaming是基于微批(Micro batc…

linux-rpm命令

rpm命令管理程序包&#xff1a;安装、升级、卸载、查询和校验 1、忽略依赖关系安装/卸载包 安装&#xff1a;rpm -Uvh 软件包名 --nodeps 卸载&#xff1a;rpm -e 软件包名 --nodes&#xff01;&#xff01;&#xff01;&#xff01;慎用&#xff01;&#xff01;&#xff01…

Qt之Gui的事件转换

QGuiApplication的实现类QGuiApplicationPrivate方法processWindowSystemEvent处理window系统事件 static void processWindowSystemEvent(QWindowSystemInterfacePrivate::WindowSystemEvent *e);在QWindowSystemInterface的处理事件方法中会调用上面的processWindowSystemEv…

1.【Labview白话系列】Labview数组精讲

题主经过写文章一段时间的发现&#xff0c;许多同学对该软件的理解和编程能力是不太一样的&#xff0c;有些知识相对一些同学较为简单&#xff0c;但是有些同学提问就比较困难。那么针对这个问题&#xff0c;题主打算出一期说白话系列的专栏&#xff0c;在该栏目中用最通俗的大…

pycharm手动安装常用插件

下载插件 &#xff08;1&#xff09;下载地址&#xff1a;JetBrains Marketplace 这里以语言包为例子 2、中文语言包 进入pycharm中的设置&#xff0c;点击plugins,选从磁盘中安装插件

算法刷题day24:归并排序

目录 引言概念一、火柴排队二、归并排序三、逆序对的数量四、小朋友排队五、超级快速排序 引言 关于这个归并排序&#xff0c;考察的还是挺多的&#xff0c;在笔试面试中会问你&#xff0c;或者直接让你写一个归并排序&#xff0c;还有竞赛中有时也会考察&#xff0c;不过一般…

PG的JDBC对SQL中绑定变量个数的限制

瀚高数据库 目录 环境 症状 问题原因 解决方案 环境 系统平台&#xff1a;N/A 版本&#xff1a;N/A 症状 问题 有开发人员使用一条Insert values 语句&#xff0c;插入多行数据。例如&#xff1a;表A有88个字段&#xff0c;一条INSERT values …中包含500条数据。 报错…