props

2023年05月06日

柏拉文

越努力，越幸运

一、认识

---

props 用于声明一个组件的 props。在 Vue 中，所有的组件 props 都需要被显式声明。组件 props 可以通过两种方式声明:

• 使用字符串数组的简易形式。

• 使用对象的完整形式。该对象的每个属性键是对应 prop 的名称，值则是该 prop 应具有的类型的构造函数，或是更高级的选项。

二、语法

---

props: ['a','b']

props: {
    a: String | Number | Boolean | Array | Object | Date | Function | Symbol | 任何自定义构造函数 | [ 类型数组 ]
    b: {
        type: String | Number | Boolean | Array | Object | Date | Function | Symbol | 任何自定义构造函数 | [ 类型数组 ],
        default: 基础数据值 | ()=> { return xxx},
        required: true | false,
        validator: (value)=> { return true | false }
    },
    c: {
        type: Object as PropType<Ts 定义的类型> | Array as PropType<Ts 定义的类型>,
        default: xx,
        required: true | false,
        validator: (value)=> { return true | false }
    }
}

• type: 可以是下列原生构造函数之一：String、Number、Boolean、Array、Object、Date、Function、Symbol、任何自定义构造函数，或由上述内容组成的数组。在开发模式中，Vue 会检查一个 prop 的值是否匹配其声明的类型，如果不匹配则会抛出警告。

• default: 为该 prop 指定一个当其没有被传入或值为 undefined 时的默认值。对象或数组的默认值必须从一个工厂函数返回。工厂函数也接收原始 prop 对象作为参数。

• required: 定义该 prop 是否必需传入。在非生产环境中，如果 required 值为真值且 prop 未被传入，一个控制台警告将会被抛出。

• validator: 将 prop 值作为唯一参数传入的自定义验证函数。在开发模式下，如果该函数返回一个假值 (即验证失败)，一个控制台警告将会被抛出。