props数据验证

待我称王封你为后i 2022-11-30 15:40 158阅读 0赞

如果需要在子组件接收父组件数据时，对数据进行一些验证，需要用到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>