vue组件传值的props传值验证

小小小小小小拉松

已于 2022-04-20 17:36:17 修改

阅读量1.5k

点赞数 1

分类专栏： vue 文章标签： vue.js

于 2022-04-20 17:33:03 首次发布

本文链接：https://blog.csdn.net/weixin_53452157/article/details/124302823

版权

vue 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

本文详细介绍了Vue.js中组件props的验证规则，包括基本类型检查、默认值设置、自定义验证函数等，强调了在非生产环境中验证失败时的控制台警告。通过示例代码，展示了如何确保prop值的正确性，以提升组件的健壮性。

摘要由CSDN通过智能技术生成

props传值验证

//简单语法
props: ['age']


props: {
    // 检测类型
    age: Number,
    // 检测类型 + 其他验证
    age: {
      type: Number, //验证类型
      default: 0,   //默认值   对象或数组的默认值必须从一个工厂函数返回

      // 对象或数组默认值必须从一个工厂函数获取
      default: function () {
        return { message: 'hello' }
      }

      required: true,  //是否必填项
      validator: function (value) {   //自定义验证函数   
        return value >= 0
      }
    }
  }

自定义验证函数会将该 prop 的值作为唯一的参数代入。在非生产环境下，如果该函数返回一个 falsy 的值 (也就是验证失败)，一个控制台警告将会被抛出。你可以在这里查阅更多 prop 验证的相关信息。