Vue.js中父组件向子组件传值最推荐方式是Props，需用对象语法显式声明类型、必填性、默认值及validator校验，引用类型default须为函数，遵循单向数据流，子组件通过emit通知父组件更新。
Vue.js 中父组件向子组件传递数据，最常用、最推荐的方式就是通过 Props。它不仅是数据流动的“管道”，更是组件间契约的体现——明确告诉子组件“我传什么、是什么类型、是否必需、有没有默认值”。规范使用 Props + 类型校验，能显著提升代码可读性、可维护性，并在开发阶段提前捕获错误。
Props 声明要显式、结构化
避免使用简写形式（如 props: ['title', 'count']），始终采用对象语法声明，为每个 prop 明确指定类型、是否必填、默认值和描述（可通过注释或 validator）：
- ✅ 推荐写法（组合式 API）：
const props = defineProps({
title: {
type: String,
required: true,
default: ''
},
count: {
type: Number,
required: false,
default: 0
},
isActive: {
type: Boolean,
default: false
},
tags: {
type: Array as PropType<string[]>,
default: () => []
}
})
- ⚠️ 注意点：
• 对于引用类型（Array、Object），default 必须是函数返回值，防止多个实例共享同一引用；
• 使用 TypeScript 时，配合 PropType 断言可获得更精准的类型推导；
• required: true 表示该 prop 不允许省略，否则 Vue 会发出警告。
类型校验不止基础类型，还要覆盖业务语义
基础类型（String、Number 等）校验只是起点。真实项目中，常需约束取值范围、格式或业务规则：
vue-admin-change-reviewer
下载
审查 Vue 管理后台的变更请求（Vue 2 + Element UI，Vue 3 + Element Plus）。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。
立即学习“前端免费学习笔记（深入）”；
- 用
validator函数做自定义校验：
status: {
type: String,
validator: (value) => ['draft', 'published', 'archived'].includes(value)
}
- 对数字加范围限制：
score: {
type: Number,
validator: (val) => val >= 0 && val <= 100
}
- 对对象结构做浅层校验（结合 JSDoc 或运行时判断）：
user: {
type: Object as PropType<{ id: number; name: string }>,
required: true,
validator: (obj) => obj && typeof obj.id === 'number' && typeof obj.name === 'string'
}
父子通信应保持单向数据流，避免子组件直接修改 Props
Props 是只读的。子组件若需“反馈变化”，应通过 emit 触发事件，由父组件决定是否更新自身状态：
- 子组件中：不写
this.title = 'new'或v-model直接绑定 props； - 正确做法：用
defineEmits声明事件，例如update:title，再通过$emit('update:title', newValue)通知父组件； - 父组件可使用
v-model:title="parentTitle"自动绑定，Vue 会自动处理update:title事件并同步数据。
命名统一、语义清晰，避免歧义
Props 名称应使用 kebab-case（HTML 模板中）或 camelCase（JS/TS 中），保持风格一致：
- 模板中传值：
<my-comp user-name="Alice" is-active="true"></my-comp> - JS 中接收：
props.userName、props.isActive - 避免模糊名称如
data、info，改用userInfo、productList等具体表达。
