当前位置: 首页 > 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数据查询语言 分为五大…...

【Oracle APEX开发小技巧12】

有如下需求&#xff1a; 有一个问题反馈页面&#xff0c;要实现在apex页面展示能直观看到反馈时间超过7天未处理的数据&#xff0c;方便管理员及时处理反馈。 我的方法&#xff1a;直接将逻辑写在SQL中&#xff0c;这样可以直接在页面展示 完整代码&#xff1a; SELECTSF.FE…...

Vue3 + Element Plus + TypeScript中el-transfer穿梭框组件使用详解及示例

使用详解 Element Plus 的 el-transfer 组件是一个强大的穿梭框组件&#xff0c;常用于在两个集合之间进行数据转移&#xff0c;如权限分配、数据选择等场景。下面我将详细介绍其用法并提供一个完整示例。 核心特性与用法 基本属性 v-model&#xff1a;绑定右侧列表的值&…...

《从零掌握MIPI CSI-2: 协议精解与FPGA摄像头开发实战》-- CSI-2 协议详细解析 (一)

CSI-2 协议详细解析 (一&#xff09; 1. CSI-2层定义&#xff08;CSI-2 Layer Definitions&#xff09; 分层结构 &#xff1a;CSI-2协议分为6层&#xff1a; 物理层&#xff08;PHY Layer&#xff09; &#xff1a; 定义电气特性、时钟机制和传输介质&#xff08;导线&#…...

FastAPI 教程:从入门到实践

FastAPI 是一个现代、快速&#xff08;高性能&#xff09;的 Web 框架&#xff0c;用于构建 API&#xff0c;支持 Python 3.6。它基于标准 Python 类型提示&#xff0c;易于学习且功能强大。以下是一个完整的 FastAPI 入门教程&#xff0c;涵盖从环境搭建到创建并运行一个简单的…...

在 Nginx Stream 层“改写”MQTT ngx_stream_mqtt_filter_module

1、为什么要修改 CONNECT 报文&#xff1f; 多租户隔离&#xff1a;自动为接入设备追加租户前缀&#xff0c;后端按 ClientID 拆分队列。零代码鉴权&#xff1a;将入站用户名替换为 OAuth Access-Token&#xff0c;后端 Broker 统一校验。灰度发布&#xff1a;根据 IP/地理位写…...

[ICLR 2022]How Much Can CLIP Benefit Vision-and-Language Tasks?

论文网址&#xff1a;pdf 英文是纯手打的&#xff01;论文原文的summarizing and paraphrasing。可能会出现难以避免的拼写错误和语法错误&#xff0c;若有发现欢迎评论指正&#xff01;文章偏向于笔记&#xff0c;谨慎食用 目录 1. 心得 2. 论文逐段精读 2.1. Abstract 2…...

Robots.txt 文件

什么是robots.txt&#xff1f; robots.txt 是一个位于网站根目录下的文本文件&#xff08;如&#xff1a;https://example.com/robots.txt&#xff09;&#xff0c;它用于指导网络爬虫&#xff08;如搜索引擎的蜘蛛程序&#xff09;如何抓取该网站的内容。这个文件遵循 Robots…...

12.找到字符串中所有字母异位词

&#x1f9e0; 题目解析 题目描述&#xff1a; 给定两个字符串 s 和 p&#xff0c;找出 s 中所有 p 的字母异位词的起始索引。 返回的答案以数组形式表示。 字母异位词定义&#xff1a; 若两个字符串包含的字符种类和出现次数完全相同&#xff0c;顺序无所谓&#xff0c;则互为…...

【OSG学习笔记】Day 16: 骨骼动画与蒙皮(osgAnimation)

骨骼动画基础 骨骼动画是 3D 计算机图形中常用的技术&#xff0c;它通过以下两个主要组件实现角色动画。 骨骼系统 (Skeleton)&#xff1a;由层级结构的骨头组成&#xff0c;类似于人体骨骼蒙皮 (Mesh Skinning)&#xff1a;将模型网格顶点绑定到骨骼上&#xff0c;使骨骼移动…...

GC1808高性能24位立体声音频ADC芯片解析

1. 芯片概述 GC1808是一款24位立体声音频模数转换器&#xff08;ADC&#xff09;&#xff0c;支持8kHz~96kHz采样率&#xff0c;集成Δ-Σ调制器、数字抗混叠滤波器和高通滤波器&#xff0c;适用于高保真音频采集场景。 2. 核心特性 高精度&#xff1a;24位分辨率&#xff0c…...