props校验是保障Vue组件健壮性的基础手段，需用对象语法显式声明类型、必填性、默认值及validator业务校验，并注意命名映射与TypeScript类型增强。

Vue 组件通信中，props 校验不是可选项，而是保障组件健壮性的基础手段。父组件传什么、怎么传，子组件必须有明确的“准入规则”，否则容易出现运行时错误、渲染异常或逻辑错乱。

显式声明 props 对象结构

避免使用数组简写（如 props: ['title', 'count']），始终采用对象语法，为每个 prop 明确类型、是否必填、默认值和校验逻辑：

• type：指定基础类型（String、Number、Boolean、Array、Object、Function、null）或自定义构造函数；多个类型用数组表示，例如 type: [String, Number]
• required：设为 true 表示该 prop 不可省略，缺失时 Vue 会在开发环境发出警告
• default：基础类型可直接赋值（如 default: 0）；引用类型（Array/Object）必须是函数返回值，防止多个组件实例共享同一引用，例如 default: () => ({}) 或 default: () => []

用 validator 做业务级深度校验

基础类型检查只能防住“类型错”，但拦不住“语义错”。比如传了字符串 "success"，但实际只接受 "success" 或 "error" ——这时要用 validator 函数：

vue-composition-api-best-practices

Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。

下载

• 函数接收 prop 的值作为参数，返回 true 表示通过，false 或抛出错误则校验失败
• 可用于校验枚举值、正则格式（如邮箱、手机号）、数值范围（如 value > 0 && value ）、对象结构完整性（如确保对象含 id 和 name 字段）
• 示例：validator: (val) => ['primary', 'warning', 'danger'].includes(val)

注意命名与传递的一致性

HTML 模板中使用短横线命名（如 is-show），子组件 props 接收时用小驼峰（isShow），Vue 内部会自动映射。若在 JSX 或 template 中直接绑定变量，也需保持命名风格统一，避免因大小写或连字符导致 props 未被识别。

立即学习“前端免费学习笔记（深入）”；

配合 TypeScript 提升类型安全

使用 PropType 断言可让 IDE 和编译器识别更精细的类型结构，例如数组元素类型、对象嵌套字段等：

• tags: { type: Array as PropType, default: () => [] }
• userInfo: { type: Object as PropType, required: true }
• TypeScript 能在编码阶段提示错误，比运行时校验更早发现问题