Vue.js Props是父组件向子组件单向传递数据的核心机制，支持数组（简单声明）和对象（含类型校验、默认值、validator）两种定义方式，遵循只读原则，确保组件健壮性与可维护性。
Vue.js 中的 Props 是父组件向子组件传递数据的核心机制，它不是简单的变量，而是受约束、可校验、有流向的数据通道。理解它的定义方式、校验逻辑和单向性，是写出健壮、可维护组件的前提。
Props 的两种定义方式：数组 vs 对象
定义 Props 有两种常见形式，适用场景不同：
-
字符串数组形式：适合简单场景，只声明 prop 名称，不设类型或默认值。例如：
props: ['title', 'visible']。子组件能接收值，但无法约束类型，也不提供默认行为。 -
对象形式：推荐在生产项目中使用。每个 key 是 prop 名，value 可指定类型（
String、Number、Array等）、是否必填（required: true）、默认值（default函数或值），甚至自定义校验函数（validator）。例如：props: { count: { type: Number, default: 0 }, status: { type: String, validator: v => ['active', 'inactive'].includes(v) } }。
Props 校验：不只是类型检查
校验不是锦上添花，而是保障组件健壮性的关键环节：
Wjs Uploading Video
下载
将一个或多个视频上传至YouTube。当用户想“上传到YouTube”“发YouTube”“批量上传”“upload to YouTube”“post videos to YouTube”或发布到YouTube时使用此技能。
- 基础类型检查（如
type: Boolean）能在开发阶段捕获传错类型的错误，比如把字符串"true"当作布尔值传入。 -
required: true明确标识该 prop 不可省略，缺失时控制台会报错，避免运行时未定义异常。 -
default支持函数写法（尤其对引用类型），防止多个组件实例共享同一对象/数组。例如：default: () => ({ name: '' })。 -
validator可做业务级约束，比如验证状态值是否在合法枚举范围内，或邮箱格式是否合规。
单向数据流：为什么不能直接改 props
Props 在 Vue 中是只读的——这不是限制，而是设计原则：
立即学习“前端免费学习笔记（深入）”；
- 父组件更新数据时，子组件的对应 prop 会自动同步刷新；但子组件内部直接赋值（如
this.msg = 'new'）会触发 Vue 警告，且修改无效。 - 若需基于 prop 衍生状态，应使用
data或computed。例如：data() { return { localMsg: this.msg } }或computed: { upperMsg() { return this.msg.toUpperCase() } }。 - 如需反馈变更给父组件，应通过
$emit触发事件（如update:xxx），由父组件决定是否更新自身数据，从而保持数据流向清晰可控。
Vue 3 中的 defineProps：语法更简洁，本质不变
在 <script setup> 中，defineProps() 是声明 props 的标准方式：
- 仍支持数组和对象两种入参形式，对象形式同样支持
type、default、required、validator等选项。 - 类型推导能力更强，配合 TypeScript 使用时，IDE 能精准提示 prop 类型和可用属性。
- 注意：即使使用
defineProps，单向数据流规则依然严格生效，试图修改 props 仍会警告。
