props校验方法
什么是props? props是前端vue开发中,父组件传给子组件数据时,用来接收数据的api。
props有两种格式:普通格式与高阶格式
普通格式:
props:['data1','data2']
此格式没有类型检查,虽然简单,但实战开发中并不推荐。
高阶格式:
props:{
data1:{
//基本的类型检查,接收到的数据,类型是什么就填什么,不符合就会报错
type:String;
//确认接收到数据,如果此处填true,但父组件没传数据的话会报错,如果填false,父组件传或不传代码都不受影响
required: true;
}
data2:{
type:Number;
//设置默认值,如果父组件没有传数据的话,调用data2会自动输出默认值。
default: 100;
}
data3:{
type:Array;
// 数组或对象默认值必须从一个工厂函数获取
default: function () {
return [10,20,30]
函数可简写为()=>[10,20,30]
}
data3:{
validator: function (value) {
// 传的值必须匹配下列字符串中的一个,否则会输出-1
return ['success', 'warning', 'danger'].indexOf(value) !== -1
}
}
}