关于vue3:Prop验证

组件能够为 props 指定验证要求。

为了定制 prop 的验证形式，你能够为 props 中的值提供一个带有验证需要的对象，而不是一个字符串数组。

定义组件

Vue.component('component_name')

指定props

props:{

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

indexOf() 办法可返回某个指定的字符串值在字符串中首次呈现的地位，若没找到则返回-1.

验证失败

当 prop 验证失败的时候，(开发环境构建版本的) Vue 将会产生一个控制台的正告。
type 能够是上面原生结构器：

String
Number
Boolean
Array
Object
Date
Function
Symbol

type 也能够是一个自定义结构器，应用 instanceof 检测。