vue组件参数校验

「爱情、让人受尽委屈。」 2023-06-03 02:56 7阅读 0赞

在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>",
              })