我们可以为组件的prop指定验证规则,如果传入的数据不符合要求,Vue会发出警告,这对于开发给他人使用的组件非常有用。
要指定验证规则,需要用对象的形式来定义prop,而不能用字符串数组;
1、验证父组件传递过来的数据类型
props选项值如果为数据,则表示只是单纯的罗列父组件传递过来的数据而已
如果props选项的值是一个对象,那么表示要验证接收的数据类型!
props: {
//属性:属性值
// 接收的数据 : 数据类型(Number,String,Boolean,Object,Array,Function,RegExp )
val : Number
}
验证父组件传过来的数据是Number类型
代码
渲染结果
报错信息
可以很清楚的看见,虽然数据是正常的渲染了,但是报错信息显示,父组件传过来的值的数据类型是与验证不相符的!
如果一个数据需要验证的项非常的多,那么就必须写成对象的写法!
val: {
type : Number, //type表示用来验证数据的类型 default : 0 , //default表示如果父组件没有向子组件传参,则使用默认值。
}
2、允许数据传递多种数据类型
如果一个数据可以接受多种数据类型,则使用数组将所有允许的类型罗列在一起。
// 子组件选项
let sonComponent = {
// props 验证数据类型
props: {
myName :String, myAge :\[ Number , String \],
}
}
3、type的数据类型
验证数据的type属性的值就是原生的构造器(构造函数)
1、String
2、Number
3、Boolean
4、Funciton
5、Object
6、Array
7、Symbol
4、必须传递的数据
有时需要指定一些数据为必须传递的,如果不传递就会报错,这个时候,数据的只是一个对象。
对象就是对于props传递的配置对象
验证的配置对象中
1、type :验证数据类型
2、required:验证数据是否为必须传递,true,是必须传递,不传就会报错
父组件代码
子组件代码
报错信息
结合代码,很显然,父组件没有给子组件传值进来,那么就会触发验证规则,而且,传入的默认项和required项不能不能同时写!
default: () => ({}) //如果是引用类型,默认值必须是一个返回对应类型的函数
default: () => [] //如果是数组,返回对应类型
5、自定义验证规则
let sonCom = {
// 子组件通过props接受数据并使用
//数组里放父组件中自定义属性的名字
//props里面使用驼峰写法
props :{
myName : {
type:String, //验证类型
default: '张三' //默认值
},
myAge: {
validator:function(value){
//自定义验证器
return value > 16 //返回true 验证通过,返回false,验证不通过报错!
}
}
}
}
本文转自 https://www.jianshu.com/p/b3f30be2218c,如有侵权,请联系删除。