Vue组件props需严格遵循规范：驼峰命名、对象式声明、显式类型校验、默认值工厂函数、谨慎解构保持响应性，并优先结合TypeScript提升可靠性。
Vue 组件中 Props 的数据结构不是随意组织的，它有一套明确、可验证、利于协作的规范体系。核心在于：声明即契约——子组件通过 props 定义告诉父组件“我需要什么、接受什么、怎么校验”。
命名与格式统一
子组件 props 定义必须用驼峰式（camelCase），如 userName、isDisabled；父组件调用时对应使用短横线分隔（kebab-case），如 :user-name="name"、:is-disabled="false"。这是 Vue 的硬性映射规则，不匹配会导致 prop 接收失败。
数组形式定义（props: ['title', 'count']）仅保留基础字段名，无法做类型或默认值约束，生产环境应避免使用。所有正式组件都应采用对象形式定义，确保结构清晰、可维护。
类型与校验必须显式声明
每个 prop 都应明确指定 type，支持原生类型（String、Number、Boolean、Array、Object、Function、Symbol）及组合类型（如 [String, Number]）。未声明 type 时，Vue 不做类型检查，容易引发运行时错误。
立即学习“前端免费学习笔记（深入）”；
- 必填项加
required: true，缺失时控制台报错，提示明确 - 默认值用
default字段：基础类型可直写（default: 0），引用类型必须用工厂函数（default: () => ({})或default: () => []），防止多个组件实例共享同一引用 - 复杂业务规则用
validator函数，例如validator: value => ['primary', 'secondary'].includes(value)
响应式与解构需谨慎处理
在 <script setup> 中使用 defineProps 声明后，返回的是响应式对象。若需解构使用（如 const { title, count } = props），要注意：
- 直接解构会丢失响应性，
title变成普通常量，无法随父组件更新而更新 - 推荐写法是保持
props.title访问，或使用编译器自动注入的语法糖（Vue 3.5+ 支持解构后仍保持响应追踪） - 若必须传入 watch / computed / 外部函数，应包装为 getter：
() => props.title，而非直接传props.title
TypeScript 集成提升结构可靠性
在 TS 项目中，优先使用基于类型的 props 声明：
- 简单场景：
const props = defineProps<{ title: string; count?: number }>() - 复杂对象：
import type { PropType } from 'vue'; defineProps({ user: { type: Object as PropType<User>, required: true } }) - 配合 IDE，能实现参数提示、类型推导、重构安全，从开发阶段就拦截结构误用
