Vue Options API如何使用 props 的 validator 进行属性校验

props 的 validator 是一个同步执行的校验函数，用于在基础类型检查后验证业务约束，接收 value 参数，返回布尔值，支持枚举、范围、格式等校验，但不可异步。

Vue Options API 中，props 的 validator 是一个函数，用于对传入的 prop 值做自定义逻辑校验，它在基础类型检查之后执行，能覆盖业务层面的约束，比如范围、枚举值、格式合法性等。

validator 函数的基本写法

validator 是 props 对象中某个 prop 的配置项之一，必须配合 type 使用（先做类型过滤，再进逻辑校验）：

1. 接收一个参数：value（当前 prop 的实际传入值）；
2. 返回 true 表示通过，false 表示失败，失败时 Vue 会在开发环境控制台抛出警告；
3. 不支持异步校验，必须同步返回布尔值。

常见校验场景与写法

枚举值限制（如只允许 'success' / 'error' / 'warning'）：

status: {type: String,validator: value => ['success', 'error', 'warning'].includes(value)}

数值范围检查（如年龄必须在 0–120）：

age: {type: Number,validator: value => Number.isInteger(value) && value >= 0 && value 

字符串非空且长度限制（如用户名 2–16 个字符）：

username: {type: String,validator: value => typeof value === 'string' && value.trim().length >= 2 && value.trim().length 

validator 中访问其他 props 的技巧

validator 函数默认只接收 value，但 Vue 2.6+ 和 Vue 3 Options API 支持三参数形式（需注意版本兼容性）：

1. Vue 2.6+：可写成 validator(value, props, propName)，其中 props 是当前组件接收到的所有 props 对象；
2. Vue 3（Options API）：同样支持该三参数签名，可用于跨 prop 关联校验（例如：当 required 为 true 时，defaultValue 不得为空）。

注意：如果使用 TypeScript，需显式标注参数类型，否则可能报错；且三参数形式在某些构建工具或旧版 Vue 中可能不被识别，建议优先用单参数 + 显式逻辑拆分。

结合 required 和 default 的注意事项

validator 不影响 required 和 default 的触发时机：

1. required: true 检查的是 prop 是否被传入，不是值是否合法；
2. default 在 prop 未传或传了 undefined 时生效，不会绕过 validator —— 即使用了 default，生成的默认值仍会进入 validator 校验；
3. 若 default 返回对象/数组，记得用工厂函数（default: () => ({})），否则会造成响应式数据共享问题。