Vue的子组件props如何设置多个校验类型

目录vue子组件props设置多个校验值Vue组件参数校验参数校验一参数校验二参数校验三总结vue子组件props设置多个校验值1.type使用|进行隔开props:{iconClas...

目录

vue子组件propsandroid设置多个校验值

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
www.cppcns.com          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>",
     })

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。