props数据验证

如果需要在子组件接收父组件数据时，对数据进行一些验证，需要用到props验证。在子组件接收父组件传递的数据，要用对象的方式，在对象中可以设置相应的验证规则。

1.数据类型验证

写法一：

props:{
'参数名':数据类型名称
}

写法二：

props:{
'参数名':{
type:数据类型名称
}
}

如果支持多个数据类型，使用数组

props:{
'参数名':{
type:[数据类型名称1,数据类型名称2]
}
}

2.必填

props:{
'参数名':{
type:数据类型名称,
required:true//设置当前参数为必传值
}
}

3.默认值

props:{
'参数名':{
type:数据类型名称,
//default:"默认展示的内容"
default:function(){
return {
msg:'默认展示的内容'
}
}
}
}

4.自定义验证规则

props:{
'参数名':{
validator:function(形参){
对形参的验证规则
return 验证结果或者布尔值
}
}
}

示例代码：

父组件：

<template>
<div>
<h1>父组件</h1>
<hr>
<v-child :msg="msg" :num="num" :str="str"></v-child>
</div>
</template>
<script>
import vChild from './Child'
export default {
components:{
vChild
},
data(){
return{
msg:"hello",
num:500,
str:"0824"
}
},
}
</script>
<style></style>

子组件：

<template>
<div>
<h1>子组件</h1>
<p>父组件传递的数据是：{{ msg }}</p>
<p>父组件传递的数据是：{{ num }}</p>
<p>{{str}}</p>
</div>
</template>

<script>
export default {
props:{
// msg:String//仅设置数据类型（数据类型名称首字母要大写）
// msg:{
//     type:String
// }
msg:{
type:[String,Number]//接收多个数据类型 String、Number、Boolean、Object、function、Symbol、Null
},
num:{
type:Number,//数据类型
required:true,//设置为必填
validator:function(val){//设置自定义验证规则
return val>1 && val<100;
//如果父组件传递的数据不在这个范围内，则会在控制台中出现一个警告
}
},
str:{
type:String,
default:"父组件没有给传递此值，什么也没有"//设置默认值
}
}
}
</script>
<style></style>