组件进阶之props校验

props校验

大家都知道props属性是在父传子的时候会使用到，那么props在接收到父组件传递的数据时是可以进行校验的。

props校验的书写格式

//这里的props是一个对象 
props:{
    //这里的name是来自父组件传递的数据
    name:{
      //type就是父组件传递数据的类型进行校验
      type:'数据类型',
      //required是必填，代表这里的name属性必须要从父组件传过来，不然就会报错
      required:true,
      //default是默认值，当父组件并没有传递name属性的话，在子组件中使用name就会显示默认值
      default:'默认值',
    },

传递的数据为引用类型

props:{
    hobby:{
      //如果父组件传递数据的类型为一个数组类型
      type:'arr',
      //那么默认值需要通过函数来创建一个对应数组类型的空数据
      default:()=>[]
    },

自定义验证函数

props:{
    status:{
      //自定义验证函数
      validator:function(value){
        //父组件传递过来的status这个数据，必须匹配下面字符串中的一个，不然就会报错
        return ['success','warning','danger'].indexOf(value) !== -1
        }
    },

type  数据类型

default  默认值

required  必须传值

validator  自定义验证函数