props 验证

最新推荐文章于 2025-07-05 16:37:21 发布

原创最新推荐文章于 2025-07-05 16:37:21 发布 · 1.9k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #前端

本文介绍了Vue.js中props的验证方式，包括指定props属性的数据类型和设置默认值。通过示例说明如何使用数组定义多个可能的数据类型，并强调在实际开发中遇到问题时可以参考此博客作为参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.什么是 props 验证

同学们不用担心很复杂，props验证其实很简单

指的是：对外界传递过来的 props 数据进行校验

大家学到这里应该知道什么是props了，如果有不清楚可以看我的上篇博文组件props

2.props节点有两种数据类型

对象类型的 props 节点

数组类型的 props 节点

使用数组类型的 props 节点的缺点：无法为每个 props 指定具体的数据类型

所以：下面的验证都用对象类型的props节点来验证

3. 对象类型的 props 节点

使用对象类型的 props 节点，可以对每个 props 进行数据类型的校验

props:{
   count:Number,
   state:Boolean
 }

这种格式就指定了每个props属性的数据类型

4.对象类型的 props 节点提供了多种数据验证方案

下面是重点

例如：

① 基础的类型检查

export default {
   props: {
      A:String, //字符串
      B:Number,//数字类型
      C：Boolean,//布尔值类型
      D：Array,//数组类型
      E：Object,//对象类型
      F：Date,//日期类型
      G：Function,//函数类型
      H：Symbol   //符号类型
   },
}

② 多个可能的类型

如果某个 prop 属性值的类型不唯一，可以通过数组的形式，为其指定多个可能的类型

export default {
   props: {
    A:[String,Number],
   },
}

这样通过数组的形式,A属性的值就可以是String 或 Number

③ 必填项校验

export default {
   props : {
      B: {
         type : String, //当前属性值必须为String字符类型
         required : true//当前属性的值是必填项，如果没有指定B属性的值，则在终端警告
         },
},
}

④ 属性默认值

export default {
   props : {
      C: {
         type : Number, 
         default : 66  //如果没有指定C的值，则C默认为 66
         },
},
}

⑤ 自定义验证函数

为 prop 属性指定自定义的验证函数，从而对 prop 属性的值进行更加精确的控制：

export default {
   props : {
     D : {
       fun(value) {
        //这个函数表示：D必须匹配'aa','bb','cc'里其中一个
        //fun函数返回为true表示验证通过，false则表示验证失败
         return ['aa','bb','cc'].indexOf(value) !== -1
           }
         },
       },
   }

//通过函数来验证，就更加精确了

好了，上面就是props验证的方法，其实挺简单的，咱们没有必要记下来，等你在实际开发过程中有不懂的，再来看一下我的博客就知道用法了