• Prop 验证
    • 类型检查

    Prop 验证

    我们可以为组件的 prop 指定验证要求，例如你知道的这些类型。如果有一个需求没有被满足，则 Vue 会在浏览器控制台中警告你。这在开发一个会被别人用到的组件时尤其有帮助。

    为了定制 prop 的验证方式，你可以为 props 中的值提供一个带有验证需求的对象，而不是一个字符串数组。例如：

    1. Vue.component('my-component', {
    2.   props: {
    3.     // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
    4.     propA: Number,
    5.     // 多个可能的类型
    6.     propB: [String, Number],
    7.     // 必填的字符串
    8.     propC: {
    9.       type: String,
    10.       required: true
    11.     },
    12.     // 带有默认值的数字
    13.     propD: {
    14.       type: Number,
    15.       default: 100
    16.     },
    17.     // 带有默认值的对象
    18.     propE: {
    19.       type: Object,
    20.       // 对象或数组默认值必须从一个工厂函数获取
    21.       default: function () {
    22.         return { message: 'hello' }
    23.       }
    24.     },
    25.     // 自定义验证函数
    26.     propF: {
    27.       validator: function (value) {
    28.         // 这个值必须匹配下列字符串中的一个
    29.         return ['success', 'warning', 'danger'].indexOf(value) !== -1
    30.       }
    31.     }
    32.   }
    33. })

    当 prop 验证失败的时候，(开发环境构建版本的) Vue 将会产生一个控制台的警告。

    注意那些 prop 会在一个组件实例创建之前进行验证，所以实例的属性 (如 data、computed 等) 在 default 或 validator 函数中是不可用的。

    类型检查

    type 可以是下列原生构造函数中的一个：

    • String
    • Number
    • Boolean
    • Array
    • Object
    • Date
    • Function
    • Symbol额外的，type 还可以是一个自定义的构造函数，并且通过 instanceof 来进行检查确认。例如，给定下列现成的构造函数：
    1. function Person (firstName, lastName) {
    2.   this.firstName = firstName
    3.   this.lastName = lastName
    4. }

    你可以使用：

    1. Vue.component('blog-post', {
    2.   props: {
    3.     author: Person
    4.   }
    5. })

    来验证 author prop 的值是否是通过 new Person 创建的。