Prop验证

发布时间:2022-08-17 13:27

组件可以为 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 检测。

ItVuer - 免责声明 - 关于我们 - 联系我们

本网站信息来源于互联网,如有侵权请联系:561261067@qq.com

桂ICP备16001015号