Vue3 Props 属性-北京尧图网络

一、Props 是什么想象一下你正在组装一个乐高机器人。机器人的头部、手臂、腿部都是独立的组件。为了让手臂知道它应该连接在身体的哪个位置你需要给它一个“连接点”的指令。在 Vue3 中Props就是这个“指令”它是父组件向子组件传递数据的一种方式。简单来说Props 是组件的自定义属性父组件通过它来给子组件“喂”数据。二、Props 的核心作用Props 主要解决组件间的通信问题具体作用如下数据传递父组件可以把数据字符串、数字、数组、对象等传递给子组件。配置组件通过传递不同的 Props 值可以让同一个子组件呈现不同的状态或行为实现复用。单向数据流数据只能从父组件流向子组件这保证了数据变化的可预测性便于调试。类型检查Vue3 的 Composition API 和 script setup 语法支持对 Props 进行类型定义提升代码健壮性。三、Props 的属性Props 选项在 Vue3 中定义 Props 时可以配置多种属性来约束和描述数据。以下是常用的 Props 属性type指定 Prop 的数据类型如String、Number、Boolean、Array、Object、Date、Function、Symbol或自定义构造函数。required布尔值表示该 Prop 是否为必传项。default指定 Prop 的默认值。可以是固定值也可以是一个返回默认值的函数。validator自定义验证函数用于校验传入的 Prop 值是否有效。四、如何接受和使用 Props代码案例1. 使用 script setup 语法推荐这是 Vue3 组合式 API 中最简洁的写法。提示带有define开头的都是宏声明属性不需要引入!-- 子组件 ChildComponent.vue -- template div h3子组件/h3 p接收到的标题{{ title }}/p p接收到的数量{{ count }}/p p用户信息{{ user.name }} ({{ user.age }}岁)/p ul li v-foritem in items :keyitem{{ item }}/li /ul /div /template script setup // 使用 defineProps 宏来声明 Props const props defineProps({ // 类型必填 title: { type: String, required: true }, // 类型默认值 count: { type: Number, default: 0 }, // 对象类型默认值函数 user: { type: Object, default: () ({ name: 匿名, age: 18 }) }, // 数组类型 items: { type: Array, default: () [] }, // 自定义验证器 score: { type: Number, validator: (value) { return value 0 value 100; } } }); // 在模板或逻辑中直接使用 props.title, props.count 等 console.log(props.title); /script!-- 父组件 ParentComponent.vue -- template div h2父组件/h2 ChildComponent title用户列表 :countuserCount :usercurrentUser :itemstodoList :score85 / /div /template script setup import { ref } from vue; import ChildComponent from ./ChildComponent.vue; const userCount ref(5); const currentUser ref({ name: 张三, age: 25 }); const todoList ref([学习 Vue, 写代码, 阅读文档]); /script补充数组形式的 defineProps除了使用对象形式定义 Props 外defineProps也支持简单的数组形式。defineProps 是有返回值的script setup // 数组形式仅声明属性名所有属性类型默认为任意类型 const props defineProps([title, count, user]); // 在模板中可以直接使用 console.log(props.title); // 来自父组件传递的值 console.log(props.count); /script推荐做法在正式项目中为了更好的代码健壮性和开发体验建议使用对象形式如上方示例或 TypeScript 泛型形式来定义 Props以便获得完整的类型检查和 IDE 提示。2. 使用 TypeScript 与类型标注结合 TypeScript 可以获得更完善的类型提示和检查。!-- 子组件 ChildComponent.vue -- template !-- 同上 -- /template script setup langts interface User { name: string; age: number; } // 使用接口定义 Props 类型 interface Props { title: string; count?: number; // 可选 user: User; items: string[]; score?: number; } // 使用泛型 defineProps const props definePropsProps(); // 或者提供默认值需要 withDefaults 辅助函数 const propsWithDefaults withDefaults(definePropsProps(), { count: 0, user: () ({ name: 匿名, age: 18 }), items: () [], }); /script3. 使用选项式 API这是 Vue2 风格的写法在 Vue3 中仍然兼容。!-- 子组件 ChildComponent.vue -- template !-- 同上 -- /template script export default { name: ChildComponent, // 在 props 选项中声明 props: { title: { type: String, required: true }, count: { type: Number, default: 0 }, user: { type: Object, default: () ({ name: 匿名, age: 18 }) }, items: { type: Array, default: () [] }, score: { type: Number, validator: function(value) { return value 0 value 100; } } }, setup(props) { // 在 setup 函数中访问 props console.log(props.title); return {}; } } /script五、使用 Props 的注意事项单向数据流不要在子组件内部直接修改 PropsVue 会警告。如果需要修改应该在子组件内定义一个新的响应式数据如使用ref或computed来接收 Prop 的初始值。Prop 命名在 JavaScript 中使用 camelCase如userName在模板中建议使用 kebab-case如user-name。动态与静态传递使用:绑定是动态传递响应式不使用:是静态字符串传递。复杂对象默认值对象或数组的default必须是一个工厂函数返回新对象避免多个组件实例共享同一引用。

Vue3 Props 属性

相关推荐

reCamera HQ POE摄像头30分钟快速部署与配置全攻略

LinkIt ONE物联网开发板入门指南：从硬件架构到GSM/GPRS实战

临近毕业论文还没动笔？这套玉芬AI急救指南请收好

更多资讯

1.6T光模块技术路线之争：LPO、NPO与CPO深度解析

Linux系统调试课（CPU篇）CPU上下文切换原理

徐州丰县婚宴场地怎么选？这几家值得看看

Dart SDK Issue Tracker 工作机制全解析：标签体系、优先级与协作规范

kubernetes-handbook 实战：使用 GitHub Pages 构建 Helm 私有 Chart 仓库

XMOS XCORE多核实时处理架构：大规模麦克风阵列与三维声场记录实践

今日更新

Play Framework 迁移指南：移除 GlobalSettings，全面转向依赖注入（Scala 与 Java）

Numba 类型推断机制详解：从 Numba IR 到编译期类型重建的完整原理与实践

企业级项目dragonballz_e159-1的技术架构与实现方案

本周精选

深入解析Transformer多头注意力机制与工程优化

OpenClaw 的 Skills 跑学习任务，模型通道改到 TaoToken 通道行不行？

ChatGPT报错Oops, an error occurred! 全链路排查指南

本月热门

基于YOLO的焊缝缺陷检测：从数据标注到工业部署全流程实践

分布式服务的决策记录

创业产品的首版范围

读完文章，想聊聊您的网站？