prop- prop验证

我们可以为组件的prop 指定验证要求,例如你知道的这些类型。如果又一个需求没有

被满足,则vue会在浏览器控制台中警告你,这在开发一个会被别人用到的组件时尤其

有帮助。

为了定制prop的验证方式,你可以为props中的值提供一个带有验证需求的对象,而

不是一个字符串数组。例如:

vue.component('my-component',{

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 } }

})

当 prop 验证失败的时候,(开发环境构建版本的) Vue 将会产生一个控制台的警告。

注意那些prop 会在一个组件实例创建之前进行验证,所以实例的属性(如

data、computed等)在default或validator函数中是不可用的。

#类型检查

type 可以是下列原生构造函数中的一个:

String

Number

Boolean

Array

Object

Date

Function

Symbol

额外的,type 还可以是一个自定义的构造函数,并且通过instance 来进行检查

确认。例如,给定下列现成的构造函数:

function Person(first,last){

this.first=first

this.last=last

}

你可以使用:

vue.component('blog-post',{

props:{

author:Person

}

})

来验证 author prop 的值是否是通过 new Person 创建的。

非prop的特性

一个非prop特性是指传向一个组件,但是该组件并没有相对应prop定义的特性。

因为显示定义的prop适用于向一个子组件传入信息,然而组件库的作者并不总能预见

组件会被用于怎样的场景。这也是为什么组件可以接受任意的特性,而这些特性会被

添加到这个组件的根元素上。

猜你喜欢

转载自blog.csdn.net/weixin_39093202/article/details/88988629