我们可以为组件的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适用于向一个子组件传入信息,然而组件库的作者并不总能预见
组件会被用于怎样的场景。这也是为什么组件可以接受任意的特性,而这些特性会被
添加到这个组件的根元素上。