028 V props的数据验证

不二如是

                               
登录/注册后可看大图

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

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

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

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

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

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

 Vue.component('my-component',{
       props:{
           // 数字类型
           propA:Number,
           // 数字或者字符串类型
           propB:[String,Number],
           // 布尔值，如果没有定义，默认为true
           propC:{
               type:Boolean,
               default:true
           }
           // 数字，必须传输
           propD:{
               type:Number,
               required:true
           },
           // 数组或对象，默认值必须return一个函数
           propE:{
               type:Array,
               default:function () {
                   return [];
               }
           },
           // 自定义一个验证函数
           propF:{
               validator:function(value){
                   return value > 10;
               }
           }
       }
    });

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