Vue 中如何对 props 进行类型检查？

推荐答案

在 Vue 中，可以通过在 props 选项中指定类型来对 props 进行类型检查。Vue 支持多种类型检查方式，包括原生构造函数、自定义构造函数以及使用 validator 函数进行更复杂的验证。

// www.javascriptcn.com code example
export default {
  props: {
    // 基本类型检查 (`null` 和 `undefined` 会通过任何类型验证)
    propA: Number,
    // 多个可能的类型
    propB: [String, Number],
    // 必填的字符串
    propC: {
      type: String,
      required: true
    },
    // 带有默认值的数字
    propD: {
      type: Number,
      default: 100
    },
    // 带有默认值的对象
    propE: {
      type: Object,
      // 对象或数组默认值必须从一个工厂函数获取
      default() {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数
    propF: {
      validator(value) {
        // 这个值必须匹配下列字符串中的一个
        return ['success', 'warning', 'danger'].includes(value)
      }
    }
  }
}

本题详细解读

1. 基本类型检查

Vue 允许你通过指定 type 来对 props 进行类型检查。type 可以是以下原生构造函数之一：

• String
• Number
• Boolean
• Array
• Object
• Date
• Function
• Symbol

如果传入的 prop 类型不符合，Vue 会在控制台中发出警告。

2. 多个可能的类型

你可以通过将 type 设置为一个数组来允许多种类型的值。例如：

propB: [String, Number]

这意味着 propB 可以是字符串或数字类型。

3. 必填的 prop

你可以通过设置 required: true 来指定某个 prop 是必填的。如果父组件没有传递该 prop，Vue 会在控制台中发出警告。

4. 默认值

你可以通过 default 选项为 prop 指定默认值。对于对象或数组类型的 prop，default 必须是一个工厂函数，返回默认值。

5. 自定义验证函数

对于更复杂的验证需求，你可以使用 validator 函数。validator 函数接收 prop 的值作为参数，并返回一个布尔值来指示该值是否有效。如果验证失败，Vue 会在控制台中发出警告。

6. 注意事项

• null 和 undefined 会通过任何类型的验证。
• 类型检查仅在开发模式下进行，生产模式下会被移除以提高性能。

通过以上方式，你可以在 Vue 中对 props 进行灵活的类型检查，确保组件接收到的数据符合预期。