关于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 检测。