属性名称

在组件中定义 prop 时名称为 camelCase，在 DOM 模板 中使用组件时 prop 名称必须为 kebab-case，在 字符串模板 中使用组件时名称既可以是 kebab-case 又可以是 camelCase，为了一致应该统一使用 kebab-case。

属性传值

传入静态字符串：name="barwe"
传入任何类型的动态值：v-bind:name="name" or :name="name"
传入非字符串类型的值需要使用动态绑定：:age="21"
传递布尔值true时可以简写：:enabled="true" 等价于 enabled
批量传入属性：v-bind="{ name: 'barwe', age: 18 }"将传递name和age属性给组件

属性检查

组件的 prop 可以指定一些检查策略，vue 会按照指定的策略给出适当的报错提示。

检查一个 prop 可以分别检查它的数据类型和值。

type 类型检查

用type指定一个 构造函数 用来检查传入的 prop 的值的数据类型，例如

基本类型的构造函数：Boolean, Number, String, Symbol
数组和对象的构造函数：Array, Object
其他内置的构造函数：Function, Date, Blob, File, ...

自定义的构造函数等

function Person(name: string, sex: 'male' | 'female') {
    this.name = name
    this.sex = sex
}

const person = new Person('barwe', 'male')
console.log(person instanceof Person) //=> true

在 TypeScript 中，type和interface定义的接口不能用于类型检查，它们只在 ts 编译时存在，生产环境下是不存在的。

多个可能的类型使用数组形式指定。

app.component('my-component', {
    props: {
        propA: Boolean,
        propB: { type: Boolean },
        propC: [Number, String],
    }
})

validator 值验证

validator用来验证传入的 prop 值是否符合要求：

app.component('my-component', {
    props: {
        propA: {
            type: String,
            validator(value: string) {
                return ['DNA', 'RNA'].includes(value)
            }
        }
    }
})

validator方法返回true则验证通过，否则验证失败，vue 会在控制台报错。

在 VueClassComponent + TypeScript 中一个规范的 prop 写法是

@Prop({
    type: String,
    validator(value: string) {
        return ['DNA', 'RNA'].includes(value)
    }
}) baseType!: 'DNA' | 'RNA'

@Prop的选项用于 vue 检查传入的属性，在生产环境中仍然有效
'DNA' | 'RNA' 是 TypeScript 的联合类型声明，在生产环境中是不存在的

其它选项

设为必需属性：required: true
设置默认值
- 基本类型，例如default: 18
- Array 类型：default: () => []
- Object 类型：default: () => ({})
- Function 类型：default: () => (/* do something */)

属性何时验证

下面是创建组件时的生命周期示意图部分

beforeCreate到created之间是创建组件的关键步骤——实现响应式绑定，然而属性的检查和验证是在beforeCreate之前进行的，所以所有与响应式相关的东西，例如data, computed，在属性中是不可用的。

参考资料

重新阅读 https://v3.cn.vuejs.org/guide/component-props.html 并做了下整理。

Vue组件 - Props