Vue方向:prop验证

Chase620
• 阅读 1443

我们可以为组件的prop指定验证规则,如果传入的数据不符合要求,Vue会发出警告,这对于开发给他人使用的组件非常有用。

要指定验证规则,需要用对象的形式来定义prop,而不能用字符串数组;

1、验证父组件传递过来的数据类型

props选项值如果为数据,则表示只是单纯的罗列父组件传递过来的数据而已

如果props选项的值是一个对象,那么表示要验证接收的数据类型!

props: {

//属性:属性值

// 接收的数据 : 数据类型(Number,String,Boolean,Object,Array,Function,RegExp )

val : Number

}

验证父组件传过来的数据是Number类型

Vue方向:prop验证

代码

Vue方向:prop验证

渲染结果

Vue方向:prop验证

报错信息

可以很清楚的看见,虽然数据是正常的渲染了,但是报错信息显示,父组件传过来的值的数据类型是与验证不相符的!

如果一个数据需要验证的项非常的多,那么就必须写成对象的写法!

val: {

   type : Number,      //type表示用来验证数据的类型

   default : 0 ,  //default表示如果父组件没有向子组件传参,则使用默认值。

}

2、允许数据传递多种数据类型

如果一个数据可以接受多种数据类型,则使用数组将所有允许的类型罗列在一起。

// 子组件选项

let sonComponent = {

// props 验证数据类型

props: {

myName :String,

myAge :\[ Number , String \],

}

}

3、type的数据类型

验证数据的type属性的值就是原生的构造器(构造函数)

1、String

2、Number

3、Boolean

4、Funciton

5、Object

6、Array

7、Symbol

4、必须传递的数据

有时需要指定一些数据为必须传递的,如果不传递就会报错,这个时候,数据的只是一个对象。

对象就是对于props传递的配置对象

验证的配置对象中

1、type :验证数据类型

2、required:验证数据是否为必须传递,true,是必须传递,不传就会报错

Vue方向:prop验证

父组件代码

Vue方向:prop验证

子组件代码

Vue方向:prop验证

报错信息

结合代码,很显然,父组件没有给子组件传值进来,那么就会触发验证规则,而且,传入的默认项和required项不能不能同时写!

default: () => ({}) //如果是引用类型,默认值必须是一个返回对应类型的函数

default: () => [] //如果是数组,返回对应类型

5、自定义验证规则

let sonCom = {

// 子组件通过props接受数据并使用

//数组里放父组件中自定义属性的名字

//props里面使用驼峰写法

props :{

        myName : {

             type:String,   //验证类型

             default: '张三'   //默认值

      },

        myAge: {

              validator:function(value){

              //自定义验证器

               return   value > 16 //返回true  验证通过,返回false,验证不通过报错!

           }

      }

}

}

本文转自 https://www.jianshu.com/p/b3f30be2218c,如有侵权,请联系删除。

点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Karen110 Karen110
3年前
一篇文章带你了解JavaScript日期
日期对象允许您使用日期(年、月、日、小时、分钟、秒和毫秒)。一、JavaScript的日期格式一个JavaScript日期可以写为一个字符串:ThuFeb02201909:59:51GMT0800(中国标准时间)或者是一个数字:1486000791164写数字的日期,指定的毫秒数自1970年1月1日00:00:00到现在。1\.显示日期使用
Wesley13 Wesley13
3年前
java将前端的json数组字符串转换为列表
记录下在前端通过ajax提交了一个json数组的字符串,在后端如何转换为列表。前端数据转化与请求varcontracts{id:'1',name:'yanggb合同1'},{id:'2',name:'yanggb合同2'},{id:'3',name:'yang
Chase620 Chase620
3年前
vue的8种通信方式
1.props/emit1.父组件向子组件传值下面通过一个例子说明父组件如何向子组件传递数据:在子组件article.vue中如何获取父组件section.vue中的数据articles:\'红楼梦','西游记','三国演义'\//section父组件<template<divclass"section"
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
待兔 待兔
4个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Jacquelyn38 Jacquelyn38
3年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
Dax Dax
3年前
Vue父子组件
几种常见的通信方式:1、prop属性父组件通过绑定属性的方式,给子组件传值,同时子组件通过设置props来接收letChildVue.extend(template:'content',props:content:type:String,default:()r
Stella981 Stella981
3年前
JS 对象数组Array 根据对象object key的值排序sort,很风骚哦
有个js对象数组varary\{id:1,name:"b"},{id:2,name:"b"}\需求是根据name或者id的值来排序,这里有个风骚的函数函数定义:function keysrt(key,desc) {  return function(a,b){    return desc ? ~~(ak
Python进阶者 Python进阶者
10个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这