由于props有点麻烦,比如:我们如果父级没有传属性名过来,那它就不会输出数据,所以这里我们使用Prop校验来完善实现它
![](https://i-blog.csdnimg.cn/direct/95ecf36e004d40a9a16d56f15f1096bf.png)
![](https://i-blog.csdnimg.cn/direct/2cdc274bf33548e8bef5ea674dd6d8b8.png)
Prop校验:
要声明对 props 的校验,你可以向 defineProps()
宏提供一个带有 props 校验选项的对象
![](https://i-blog.csdnimg.cn/direct/125c415d98884873bb21c4921e3532a2.png)
在defineProps方法里面直接传一个对象
记得属性名后面要添加一个对象,对象里定义一个type类型,然后输入你要的类型,比如String类型
属性名后面记得加冒号
还可以定义一个默认值,这样父级那边没有传属性名过来是,使用默认值
并且都要用逗号隔开,不然会报错
![](https://i-blog.csdnimg.cn/direct/775617652e054561937450e823270ee8.png)
![](https://i-blog.csdnimg.cn/direct/006144b686464a0cbc262e9974cf505b.png)
![](https://i-blog.csdnimg.cn/direct/cb2c5c2089ff4c908c8b0891f484a545.png)
![](https://i-blog.csdnimg.cn/direct/8766b275f5c24014a3b267c6b60a2b88.png)
![](https://i-blog.csdnimg.cn/direct/b45e0a7d77334c9bad0a86bb8668b588.png)
图片一样的,没传属性名的话,使用默认路径
![](https://i-blog.csdnimg.cn/direct/b66e8f515c144e14933eb2b2b3a7e8b8.png)
![](https://i-blog.csdnimg.cn/direct/c1795959fd5445658cbd02adb4752815.png)
如果两个一样的子组件都不传属性名时怎么办?
![](https://i-blog.csdnimg.cn/direct/de92357e3bbe426db57584323fb52979.png)
![](https://i-blog.csdnimg.cn/direct/2ce802a65a374505ad624d442caab063.png)
解决方法:
直接在子组件里defineProps声明一个函数(比如:obj)
如果是字符串的话,可以直接定义一个默认值
但如果是一个对象数组的话,就需要定义一个函数
如果有子组件没有传属性名过去的话,就使用obj定义的默认值
所以对象一定要用default方法传一个默认值过去
记得用return返回值返回
![](https://i-blog.csdnimg.cn/direct/9e093160c42a4bccb905096b0038d919.png)
![](https://i-blog.csdnimg.cn/direct/d50abdb488de4ef49913762cd4c4debe.png)
![](https://i-blog.csdnimg.cn/direct/ccec40147a6a451f9a07d1e4bae9f3d1.png)
而在父类这边如果没有传obj的时候,就会使用子组件那边obj定义的默认值
![](https://i-blog.csdnimg.cn/direct/ad60f1ac9ecd4ae28c051a5c20433186.png)
![](https://i-blog.csdnimg.cn/direct/947685fc5e3d471fbe41d0892f65a0d2.png)
prop遍历循环:
![](https://i-blog.csdnimg.cn/direct/db7ab61cb065491bb6367736f136efc1.png)
![](https://i-blog.csdnimg.cn/direct/02aef85b222f49c7bc00d8b22cc564fd.png)