028 V props的数据验证

不二如是

                               
登录/注册后可看大图

上一讲我们搞定了props的单向传递，本次学习数据验证。

之前的教程中props选项的值一般都是数组，除了数组外，还可以是对象。

当需要验证时，往往都是对象写法。

一般当我们的组件需要提供给其他人使用时，往往都会进行数据验证。

比如某个数据必须是数字类型，如果传入字符串，我们要发出警告。

统一用一大段代码演示下：

1. Vue.component('my-component',{
   
2.        props:{
   
3.            // 数字类型
   
4.            propA:Number,
   
5.            // 数字或者字符串类型
   
6.            propB:[String,Number],
   
7.            // 布尔值，如果没有定义，默认为true
   
8.            propC:{
   
9.                type:Boolean,
   
10.                default:true
    
11.            }
    
12.            // 数字，必须传输
    
13.            propD:{
    
14.                type:Number,
    
15.                required:true
    
16.            },
    
17.            // 数组或对象，默认值必须return一个函数
    
18.            propE:{
    
19.                type:Array,
    
20.                default:function () {
    
21.                    return [];
    
22.                }
    
23.            },
    
24.            // 自定义一个验证函数
    
25.            propF:{
    
26.                validator:function(value){
    
27.                    return value > 10;
    
28.                }
    
29.            }
    
30.        }
    
31.     });

复制代码

type类型还可以是：

String、Number、Boolean、Object、Array、Function

type还可以是一个自定义构造器，通过instanceof检测即可。

本节属于了解，直到用的时候有哪些功能可供调用即可。

---

课后作业


1、props选项的值不可以是对象（T/F）

2、下列选项哪个是props验证时可支持的type类型：
a.Function  b._proto  c.data  d.NumberData



答案：

游客，如果您要查看本帖隐藏内容请回复

---

如果有收获，别忘了评分 ：

                               
登录/注册后可看大图

这位鱼油，如果喜欢Vue，请订阅 专辑（传送门）（不喜欢更要订阅 ）

                               
登录/注册后可看大图

lbjstudypython

1.F
2.a

Ruide

1.F
2.a，d

jack6666

1