Vue的子组件props如何设置多个校验类型
作者：小火车况且况且
这篇文章主要介绍了Vue的子组件props如何设置多个校验类型问题。具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
vue子组件props设置多个校验值
1. type使用 | 进行隔开
props: {
iconClass: {
type: String | null,
required: true,
default: ""
}
},2. 使用数组
props: {
iconClass: [String , null]
},3. 使用validator校验函数
props: {
iconClass: {
validator: (value)=> {
const getResult = Object.prototype.toString.call(value)
if(getResult === "[object Null]" || getResult === "[object String]") return true;
},
required: true,
default: ""
},
}vue组件参数校验
在vue中,当父组件向子组件传递值时.子组件可以对传递过来的值进行参数校验.
首先我们定义一个子组件child,接受父组件传递过来的值content.
<child :content="1"></child>
Vue.component('child',{
props:['content'],
template: "<div>{{content}}</div>",
})注意但我们在content前面加上:,它会认为这是js表达式,所以认为"1"是Number类型而不是String类型.
参数校验一
限定参数的类型
<child :content="1"></child>
Vue.component('child',{
props:{
content: [String,Number], //这样就限制了参数的类型为String或者Number.
},
template: "<div>{{content}}</div>",
})如果不满足则会报[Vue warn]: Invalid prop: type check failed for prop “content”. Expected String, got Number.
参数校验二
限定参数的类型，是否必须，默认值
Vue.component('child',{
props:{
content:{
type:Number, //限制参数的类型为Number
default:100, //设置参数的默认值为100
required:false, //是否必须
}
},
template: "<div>{{content}}</div>",
})参数校验三
自定义校验规则
Vue.component('child',{
props:{
content:{
type:Number,
default:100,
required:false,
validator:function(value){ //自定义校验的规则
return value>5;
}
}
},
template: "<div>{{content}}</div>",
})总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。