当前位置: 首页 > news >正文

深入理解 Vue 3 中的 Props

深入理解 Vue 3 中的 Props

Vue 3 引入了 Composition API 等新特性,组件的定义和使用也变得更为灵活。而在组件通信中,Props(属性)扮演了重要角色,帮助父组件向子组件传递数据,形成单向的数据流动,确保组件状态管理的清晰性。本文将详细介绍 Vue 3 中 Props 的常用知识点,包括基本用法、类型检测、默认值设置、自定义验证等,以帮助开发者更好地掌握 Vue 3 中的 Props。

1. Props 的基本用法

在 Vue 3 中,Props 是在 defineComponent 函数的 props 选项中定义的。可以通过 props 接收从父组件传递的参数。例如,定义一个 UserProfile 组件,接受一个 username 属性:

<script setup>
import { defineProps } from 'vue';const props = defineProps({username: String
});
</script><template><div><p>Username: {{ props.username }}</p></div>
</template>

在父组件中,我们可以通过 v-bind 或直接传递 username

<UserProfile :username="'VueLearner'" />

2. Props 的类型检测

在 Vue 3 中,可以通过为 props 定义类型来帮助检测传入数据的正确性。常用类型包括 StringNumberBooleanArrayObjectFunction 等,还可以通过 ObjectArray 来定义复杂的数据结构:

const props = defineProps({username: String,age: Number,isAdmin: Boolean,tags: Array,profile: Object
});

3. Props 的默认值设置

可以通过 default 属性为 props 设置默认值。当父组件未传递该 props 值时,组件将自动使用默认值。默认值可以是静态值或函数:

const props = defineProps({username: {type: String,default: 'Guest'},age: {type: Number,default: 18},tags: {type: Array,default: () => ['vue', 'javascript']}
});

在上述代码中,username 默认值为 'Guest'age 默认值为 18,而 tags 是一个返回数组的函数,确保每个实例都有独立的数组。

4. Props 的必填选项

可以通过 required: trueprops 设置为必填项。如果父组件未传递该 props,Vue 将在开发环境中发出警告:

const props = defineProps({username: {type: String,required: true}
});

以上代码中,username 是必填项,未传入时会触发错误提示。

5. Props 的自定义验证

在某些场景下,内置类型检测可能不足以满足需求。Vue 提供了 validator 选项,允许开发者定义自定义验证逻辑:

const props = defineProps({age: {type: Number,validator: (value) => {return value >= 0 && value <= 120;}}
});

在上面的代码中,age 必须是一个数字,且范围在 0120 之间,否则会抛出警告。

6. 接收多种类型的 Props

有时一个 props 需要接受多种类型的数据。例如 id 可能既是 String 又可能是 Number 类型,可以通过数组的形式指定多个类型:

const props = defineProps({id: [String, Number]
});

在这种情况下,id 可以是 StringNumber 类型,两者之一即合法。

7. 动态 Props

有时需要在运行时决定 props 的值或类型。Vue 3 提供了 defineProps 的动态用法,可以在组件实例化后获取 props。例如:

import { computed } from 'vue';const props = defineProps({level: {type: Number,default: 1}
});const message = computed(() => {return props.level > 1 ? 'High level user' : 'New user';
});

动态计算 message 值,以适应 props.level 的不同。

8. 使用解构避免重复

defineProps 中,可以直接解构 props 变量,避免每次使用 props. 前缀:

const { username, age } = defineProps({username: String,age: Number
});

这种方式在简化代码的同时,提高了可读性。

9. 在子组件中监听 Props 变化

Vue 3 中,props 是响应式的,可以直接在 watch 中监听 props 值的变化。例如,监听 username 变化并触发某个逻辑:

import { watch } from 'vue';const props = defineProps({username: String
});watch(() => props.username, (newVal, oldVal) => {console.log(`Username changed from ${oldVal} to ${newVal}`);
});

10. 禁止修改 Props

在 Vue 中,props 的数据流是单向的,即从父组件到子组件。子组件不应直接修改 props 值,否则会导致控制台警告。在需要变更时,可通过 emit 事件通知父组件更改数据,或在子组件中定义一个局部变量:

const { username } = defineProps({username: String
});const localUsername = ref(username); // 创建局部变量进行修改

总结

在 Vue 3 中,Props 是组件通信的核心机制之一,通过设置类型、默认值、必填选项、自定义验证等手段,开发者可以更好地控制父子组件间的数据流动,使得组件数据管理更具稳定性和灵活性。希望本篇内容能帮助你更好地理解和使用 Vue 3 中的 Props,在开发中提升组件的复用性和可维护性。

相关文章:

深入理解 Vue 3 中的 Props

深入理解 Vue 3 中的 Props Vue 3 引入了 Composition API 等新特性&#xff0c;组件的定义和使用也变得更为灵活。而在组件通信中&#xff0c;Props&#xff08;属性&#xff09;扮演了重要角色&#xff0c;帮助父组件向子组件传递数据&#xff0c;形成单向的数据流动&#x…...

校园周边美食探索及分享平台

摘要&#xff1a; 美食一直是与人们日常生活息息相关的产业。传统的电话订餐或者到店消费已经不能适应市场发展的需求。随着网络的迅速崛起&#xff0c;互联网日益成为提供信息的最佳俱渠道和逐步走向传统的流通领域&#xff0c;传统的美食业进而也面临着巨大的挑战&#xff0…...

内网对抗-信息收集篇SPN扫描DC定位角色区域定性服务探针安全防护凭据获取

知识点&#xff1a; 1、信息收集篇-网络架构-出网&角色&服务&成员 2、信息收集篇-安全防护-杀毒&防火墙&流量监控 3、信息收集篇-密码凭据-系统&工具&网站&网络域渗透的信息收集&#xff1a; 在攻防演练中&#xff0c;当完成边界突破后进入内…...

石墨舟氮气柜:半导体制造中的关键保护设备

石墨舟是由高纯度石墨材料制成的&#xff0c;主要用于承载硅片或其他基板材料通过高温处理过程&#xff0c;是制造半导体器件和太阳能电池片的关键设备之一。 石墨舟在空气中容易与氧气发生反应&#xff0c;尤其是在高温处理后&#xff0c;表面可能更为敏感&#xff1b;石墨舟具…...

性能调优专题(7)之Innodb底层原理与Mysql日志机制深入剖析

一、MYSQL的内部组件结构 大体来说,Mysql可以分为Server层和存储引擎层两部分。 1.1 Server层 Server层主要包括连接器、查询缓存、词法分析器、优化器等。涵盖MYSQL的大多数核心服务功能,以及所有的内置函数(如日期、时间、数学和加密函数等),所有跨存储引擎的功…...

量子计算及其在密码学中的应用

&#x1f493; 博客主页&#xff1a;瑕疵的CSDN主页 &#x1f4dd; Gitee主页&#xff1a;瑕疵的gitee主页 ⏩ 文章专栏&#xff1a;《热点资讯》 量子计算及其在密码学中的应用 量子计算及其在密码学中的应用 量子计算及其在密码学中的应用 引言 量子计算概述 定义与原理 发展…...

LSM树 (Log-Structured Merge Tree)、Cuckoo Hashing详细解读

一、LSM 树 (Log-Structured Merge Tree) LSM 树&#xff08;Log-Structured Merge Tree&#xff09; 是一种专为 高效写入和批量更新 设计的数据结构&#xff0c;特别适合于 高写入密度 的应用场景&#xff0c;如数据库和文件系统。它广泛用于 NoSQL 数据库&#xff08;如 Ca…...

VMware中的重要日志文件 vobd.log 学习总结

最近几天处理完毕存储的故障后&#xff0c;接着就是host方面的问题&#xff0c;Vmware无法访问到存储&#xff0c;其实存储的LUN和POOL 已经online ready了&#xff0c;但是主机还是访问不到存储。 这里介绍下Vmware中的一个重要的日志文件 vobd.log&#xff0c;该文件对于分析…...

MyBatis 返回 Map 或 List<Map>时,时间类型数据,默认为LocalDateTime,响应给前端默认含有‘T‘字符

一、问题 MyBatis 返回 Map 或 List时&#xff0c;时间类型数据&#xff0c;默认为LocalDateTime Springboot 响应给前端的LocalDateTime&#xff0c;默认含有’T’字符&#xff0c;如何统一配置去掉 二、解决方案 1、pom.xml 增加依赖&#xff08;2024.11.6 补充&#xff…...

ASR TP

ASR翱捷科技 ASR kernel 5.10 android14 ASR EVB平台 jd9365tr(jadard) spi 1.驱动: 跟mtk驱动一样,放进去,不用改 asr_android14.0_alpha\asr\kernel\linux\drivers\input\touchscreen\jadard makefile: asr_android14.0_alpha\asr\kernel\linux\drivers\input\t…...

Tomcat与Nginx之全面比较

概况 Apache Tomcat Apache Tomcat&#xff0c;通常简称为Tomcat&#xff0c;是一个开源的Web应用服务器&#xff0c;它主要用于运行Java Web应用程序。Tomcat实现了Java Servlet和JavaServer Pages&#xff08;JSP&#xff09;技术&#xff0c;这些是Java EE规范的一部分。To…...

这是一个bug求助帖子--安装kali 遇坑

第一个报错 介质&#xff1a;kali-linux-2024.1-live-amd64 环境&#xff1a;Dell笔记本 i510代cpu 现象及操作 安装完以后 然后我换了个国内的源进行了以下操作 apt-get update&#xff1a;更新源列表 apt-get upgrade&#xff1a;更新所有可以更新的软件包 然后进行清理。…...

IntelliJ Idea设置自定义快捷键

我IDEA的快捷键是自己修改成了和Eclipse相似&#xff0c;然后想要跳转到某个方法的上层抽象方法没有对应的快捷键&#xff0c;IDEA默认的是Ctrl U &#xff08;Windows/Linux 系统&#xff09; 或 Command U &#xff08;Mac 系统&#xff09;&#xff0c;但是我的不起作用&a…...

AlohaKit:一组.NET MAUI绘制的开源控件

前言 今天大姚给大家分享一组.NET MAUI绘制的开源、免费&#xff08;MIT License&#xff09;UI控件库&#xff1a;AlohaKit。 MAUI介绍 .NET MAUI是一个开源、免费&#xff08;MIT License&#xff09;的跨平台框架&#xff08;支持Android、iOS、macOS 和 Windows多平台运…...

Windows 实例磁盘空间管理

操作场景 本文以操作系统为 Windows Server 2012 R2 的腾讯云云服务器为例&#xff0c;介绍如何在 Windows 实例磁盘空间不足的情况下进行空间释放操作&#xff0c;及如何进行磁盘的日常维护。 操作步骤 释放磁盘空间 您可通过 删除容量较大文件 或 删除不需要的文件 &…...

【动手学电机驱动】STM32-FOC(6)基于 IHM03 的无感方波控制

STM32-FOC&#xff08;1&#xff09;STM32 电机控制的软件开发环境 STM32-FOC&#xff08;2&#xff09;STM32 导入和创建项目 STM32-FOC&#xff08;3&#xff09;STM32 三路互补 PWM 输出 STM32-FOC&#xff08;4&#xff09;IHM03 电机控制套件介绍 STM32-FOC&#xff08;5&…...

【数据结构】汇编语言和机器语言的‘数据结构‘

前言 汇编语言没有像高级语言&#xff08;如 C#、Java 等&#xff09;那样直接提供数据结构&#xff08;如数组、链表、树、栈等&#xff09;&#xff0c;但是可以通过对内存地址和寄存器的操作来实现这些数据结构。汇编语言的核心是直接操控计算机的内存&#xff0c;因此所有…...

hadoop+spark中8088,18080,19888,4040端口页面的区别

在hadoop集群中&#xff0c;本身就有 9870端口&#xff0c;8088端口&#xff0c;19888端口 这三个页面&#xff0c;当使用spark作为计算引擎时&#xff0c;会多出8080&#xff0c;4040&#xff0c;18080这三个页面&#xff0c;页面就很多了&#xff0c;现在明确的辨别一下。 单…...

PDS的主要部件

PDS&#xff08;配电系统&#xff09;的主要部件包括去耦电容器、电源调节器、PCB几何结构等。以下是这些主要部件的相关介绍&#xff1a; 去耦电容器&#xff1a;去耦电容器是PDS中不可或缺的组成部分&#xff0c;其主要功能是过滤掉电源线上的噪声和干扰&#xff0c;确保供电…...

(十三)JavaWeb后端开发——MySQL2

目录 1.DQL数据查询语言 1.1基本查询 1.2条件查询 where关键字 1.3分组查询 1.4排序查询 1.5分页查询 2.多表设计 3.多表查询——联查 4.多表查询——子查询​ 5.MySQL 事务 6.事务管理&#xff08;事务进阶&#xff09; 7.MySQL 索引 1.DQL数据查询语言 分为五大…...

生成xcframework

打包 XCFramework 的方法 XCFramework 是苹果推出的一种多平台二进制分发格式&#xff0c;可以包含多个架构和平台的代码。打包 XCFramework 通常用于分发库或框架。 使用 Xcode 命令行工具打包 通过 xcodebuild 命令可以打包 XCFramework。确保项目已经配置好需要支持的平台…...

HTML 语义化

目录 HTML 语义化HTML5 新特性HTML 语义化的好处语义化标签的使用场景最佳实践 HTML 语义化 HTML5 新特性 标准答案&#xff1a; 语义化标签&#xff1a; <header>&#xff1a;页头<nav>&#xff1a;导航<main>&#xff1a;主要内容<article>&#x…...

iOS 26 携众系统重磅更新,但“苹果智能”仍与国行无缘

美国西海岸的夏天&#xff0c;再次被苹果点燃。一年一度的全球开发者大会 WWDC25 如期而至&#xff0c;这不仅是开发者的盛宴&#xff0c;更是全球数亿苹果用户翘首以盼的科技春晚。今年&#xff0c;苹果依旧为我们带来了全家桶式的系统更新&#xff0c;包括 iOS 26、iPadOS 26…...

Qt Widget类解析与代码注释

#include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this); }Widget::~Widget() {delete ui; }//解释这串代码&#xff0c;写上注释 当然可以&#xff01;这段代码是 Qt …...

Objective-C常用命名规范总结

【OC】常用命名规范总结 文章目录 【OC】常用命名规范总结1.类名&#xff08;Class Name)2.协议名&#xff08;Protocol Name)3.方法名&#xff08;Method Name)4.属性名&#xff08;Property Name&#xff09;5.局部变量/实例变量&#xff08;Local / Instance Variables&…...

Qwen3-Embedding-0.6B深度解析:多语言语义检索的轻量级利器

第一章 引言&#xff1a;语义表示的新时代挑战与Qwen3的破局之路 1.1 文本嵌入的核心价值与技术演进 在人工智能领域&#xff0c;文本嵌入技术如同连接自然语言与机器理解的“神经突触”——它将人类语言转化为计算机可计算的语义向量&#xff0c;支撑着搜索引擎、推荐系统、…...

sipsak:SIP瑞士军刀!全参数详细教程!Kali Linux教程!

简介 sipsak 是一个面向会话初始协议 (SIP) 应用程序开发人员和管理员的小型命令行工具。它可以用于对 SIP 应用程序和设备进行一些简单的测试。 sipsak 是一款 SIP 压力和诊断实用程序。它通过 sip-uri 向服务器发送 SIP 请求&#xff0c;并检查收到的响应。它以以下模式之一…...

pikachu靶场通关笔记19 SQL注入02-字符型注入(GET)

目录 一、SQL注入 二、字符型SQL注入 三、字符型注入与数字型注入 四、源码分析 五、渗透实战 1、渗透准备 2、SQL注入探测 &#xff08;1&#xff09;输入单引号 &#xff08;2&#xff09;万能注入语句 3、获取回显列orderby 4、获取数据库名database 5、获取表名…...

提升移动端网页调试效率:WebDebugX 与常见工具组合实践

在日常移动端开发中&#xff0c;网页调试始终是一个高频但又极具挑战的环节。尤其在面对 iOS 与 Android 的混合技术栈、各种设备差异化行为时&#xff0c;开发者迫切需要一套高效、可靠且跨平台的调试方案。过去&#xff0c;我们或多或少使用过 Chrome DevTools、Remote Debug…...

自然语言处理——文本分类

文本分类 传统机器学习方法文本表示向量空间模型 特征选择文档频率互信息信息增益&#xff08;IG&#xff09; 分类器设计贝叶斯理论&#xff1a;线性判别函数 文本分类性能评估P-R曲线ROC曲线 将文本文档或句子分类为预定义的类或类别&#xff0c; 有单标签多类别文本分类和多…...