学习要点：
1.Prop 验证
本节课我们来开始学习 Vue3.x 的组件中 Prop 类型验证的方法。
一．Prop 验证
1. 接着 Prop 类型继续往下探讨，重点研究一下 Prop 类型验证的问题，如下；
<html-a v-bind:parent-message="100">html-a>
//prop 通信
props : {
parentMessage : Number
},
PS：上面例子是之前的代码，意味必须传递一个数值，否则会提示类型不匹配；
2. 当然，除了限定一个类型之外，还可以设置限定多个类型，比如：
props : {
parentMessage : [Number, String]
},
PS：这样，传递过来的类型数值和字符串均可通过；
3. 如果没有值传入的时候，也可以给其设置一个默认值；
props : {
parentMessage : {
type : [Number, String],
default : 100
}
},
PS：默认值也可以通过函数进行返回；
props : {
parentMessage : {
type : [Number, String],
default : function () {
return 200
}
}
},
4. 上面的例子中使用的 type 类型检查，全部类型检查如下：
String/Number/Boolean/Array/Object/Date/Function/Symbol
PS：如果你创建了一个对象，要求传递的检查这个对象类型，也是支持的；
5. 使用自定义验证函数 validator 来处理传递过来的数据；
props : {
parentMessage : {
validator(value) {
return ['a', 'b', 'c'].indexOf(value) !== -1
}
}
},
PS：此时，传递过来的值必须是 a,b,c 中的一种，否则提示不匹配；
本文由:兰州启点网络（
www.lzqidian.com)整理发布!
启点CMS演示地址及账号
