深入理解 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,在开发中提升组件的复用性和可维护性。

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

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

相关文章

R语言实战——一些批量对地理数据进行操作的方法

各位朋友在进行数据处理时&#xff0c;当有多张栅格影像时&#xff0c;如果我们都要进行同一操作时&#xff0c;一张一张做很繁琐&#xff0c;用ArcGIS模型构建器是一种比较好的方法。当然&#xff0c;今天小编新学了R语言上面进行批量裁剪&#xff0c;一起来学习一下吧&#x…

【时间之外】IT人求职和创业应知【31】

目录 新闻一&#xff1a;2024年“秦创原沣东杯”陕西省科技工作者创新创业大赛颁奖仪式暨沣东新城机器人产业发展大会盛大启幕 新闻二&#xff1a;声网CEO赵斌&#xff1a;RTE将成为生成式AI时代AI Infra的关键部分 新闻三&#xff1a;“5G工业互联网”融合应用试点城市名单…

使用ThorUi

摘要&#xff1a; 官网 今天遇到一个老项目&#xff0c;使用的是ThorUi组件库&#xff01;之前没有用过这组件库&#xff0c;所以记录一下不同框架是使用情况&#xff01; ThorUI 是一个基于 Thorium 的 UI 框架&#xff0c;用于构建跨平台的桌面应用程序。如果你打算使用 Thor…

科研绘图系列:R语言文章组合图形(barplot scatterplot)

文章目录 介绍加载R包数据下载清理环境设置计算资源数据处理图1图2图3图4图5图6图7图8图9系统信息介绍 R语言组合图形 加载R包 library(xlsx) library(reshape2) library(ggplot2) library(ggh4x) library(wbstats

内网部署web项目,外网访问不了?只有局域网能访问!怎样解决?

相关技术 要实现“内网部署&#xff0c;外网访问”&#xff0c;可以使用内网穿透、VPN技术、DMZ主机、端口映射等方法。以下是对这些方法的详细解释&#xff1a; 一、内网穿透 内网穿透是一种技术&#xff0c;它通过将内网设备映射到公网上的方式&#xff0c;实现外网访问内…

从零开始训练一个大语言模型需要多少天?

一&#xff0c;前言 在AI领域&#xff0c;训练一个大型语言模型&#xff08;LLM&#xff09;是一个耗时且复杂的过程。几乎每个做大型语言模型&#xff08;LLM&#xff09;训练的人都会被问到&#xff1a;“从零开始&#xff0c;训练大语言模型需要多久和花多少钱&#xff1f;”…

ubuntu 22.04 如何调整进程启动后能打开的文件数限制

在 Ubuntu 22.04 中&#xff0c;可以通过修改系统配置来调整进程启动后能够打开的文件数软限制。软限制是指操作系统允许单个进程打开的文件描述符的最大数量。以下是调整该限制的方法&#xff1a; 1. 查看当前限制 首先&#xff0c;你可以通过 ulimit 命令查看当前的软限制和…

Halcon resistor.hedv 使用多个对焦级别提取深度

depth_from_focus * Extract depth using multiple focus levels * 使用多个对焦级别提取深度 Names : [] * 初始化一个空数组&#xff0c;用于存储图像名称 dev_close_window () * 关闭当前打开的图像窗口 for i : 1 to 10 by 1 * 循环开始&#xff0c;从1到10 …

C语言 | Leetcode C语言题解之第546题移除盒子

题目&#xff1a; 题解&#xff1a; int dp[100][100][100];int calculatePoints(int* boxes, int l, int r, int k) {if (l > r) {return 0;}if (dp[l][r][k] 0) {int r1 r, k1 k;while (r1 > l && boxes[r1] boxes[r1 - 1]) {r1--;k1;}dp[l][r][k] calcu…

玩的花,云产品也能拼团了!!!

说起拼单大家都不陌生&#xff0c;电商一贯的营销手段&#xff0c;不过确实可以给消费者省下一笔钱。双11到了&#xff0c;腾讯云产品也玩起了拼团&#xff0c;这明显是对开发人员和各企业的福利。 对于有云产品需求的个人或企业&#xff0c;这次绝对是难得的一次薅羊毛机会。…

win10@win10 配置openssh服务

1.下载离线包&#xff1a;https://github.com/PowerShell/Win32-OpenSSH/releases 2.然后管理员打开powershell&#xff0c;cd到这个安装包放置的目录中来&#xff0c;输入以下命令&#xff1a;powershell.exe -ExecutionPolicy Bypass -File install-sshd.ps1 此时要注意pow…

独孤思维:曾经副业赚大钱的人,怎么不见了

01 总有一双眼睛默默关注你。 别以为自己每天做项目&#xff0c;日更文章&#xff0c;没人看。 总会有人默默观察你。 看你能坚持多久&#xff0c;看多段时间&#xff0c;你是不是还在。 今天上午&#xff0c;有个2年前认识的副业同行&#xff0c;今天突然跟我发消息。 说…

全面解析:网络协议及其应用

&#x1f493; 博客主页&#xff1a;瑕疵的CSDN主页 &#x1f4dd; Gitee主页&#xff1a;瑕疵的gitee主页 ⏩ 文章专栏&#xff1a;《热点资讯》 # 全面解析&#xff1a;网络协议及其应用 文章目录 网络协议概述定义发展历程主要优势 主要网络协议应用层协议传输层协议网络层…

Linux系统编程之--多线程

一.线程概述 线程是允许应用程序并法执行多个任务的一种机制,提高操作系统的运行效率. 线程是轻量级的进程(LWP),在Linux环境下线程的本质仍是进程 查看指定进程的LWP号:ps -LF pid 二.进程与线程的区别(重点) 一个进程可以包含多个线程,同一个程序中的所有线程均会独立执行…

技术总结(二十四)

一、Redis 分布式锁的常见使用场景有哪些&#xff1f; 资源竞争控制 数据库事务控制&#xff1a;在分布式系统中&#xff0c;多个服务可能会同时对数据库中的同一行数据进行操作。例如&#xff0c;在一个电商系统里&#xff0c;多个订单处理服务可能会同时尝试更新同一个订单的…

webWorker基本用法

我们都知道js是一个单线程的语言&#xff0c;当线程堵塞时&#xff0c;可能会导致页面无法正常交互&#xff0c;如一些复杂的可视化处理。即使是异步处理&#xff0c;也只是将其暂存到任务队列中去&#xff0c;等主线程执行完后依然会从任务队列中取过去。 为此&#xff0c;js提…

【1】虚拟机安装

1.安装VMware WorkStation Pro VMware下载地址&#xff1a; 2.新建虚拟机 centos7下载地址&#xff1a;centos-7.9.2009-isos-x86_64安装包下载_开源镜像站-阿里云

2-149 基于matlab的LDPC译码性能分析

基于matlab的LDPC译码性能分析&#xff0c;LDPC&#xff08;Low-Density Parity-Check&#xff09;码作为编码技术&#xff0c;具有优秀的纠错性能和较低的编解码复杂度。为保证可靠的数据传输&#xff0c;对传输过程中可能出现的信道噪声、干扰等进行模拟和分析。分析对比了误…

游戏开发--C#面试题

游戏开发--C#面试题 C#1. 值类型和引用类型的区别2. 重载和重写的区别3. ArrayList和List的区别4. List底层是什么实现的&#xff1f;5. 抽象类和接口的区别6. 静态成员和⾮静态成员的区别7. 装箱和拆箱是指什么&#xff1f;8. 值和引用类型在变量赋值时的区别是什么&#xff1…

Systemd:tmpfiles

Systemd提供了一个结构化的可配置方法来管理临时文件和目录,即systemd-tmpfiles,可以创建、删除和管理临时文件的服务。 $ systemctl list-units --all | grep systemd-tmpfilessystemd-tmpfiles-clean.service load…