什么是prop

prop的定义: 组件上 注册的一些 自定义属性

prop的作用: 向子组件传递数据

特点:可以传递 任意数量 的prop 可以传递 任意类型 的prop

下面是我做好的一个例子

如果直接在子组件那边写 名字:彭于晏 这种就把数据给写死了,应该从父组件传给子组件,下面演示的就是传的值的类型

如图所示,props能接收任意的类型

prop的校验

作用: 为组件的 prop 指定 验证要求, 不符合要求, 错误提示 => 帮助开发者快速发现错误

为什么要校验呢?如果不校验会怎么样呢?让我们继续往下看

下图是一个案例和渲染出来的样子

如果不校验我传过去一个字符串会怎样?

就会如图所示了,所以我们需要校验,传过来的必须是我们需要的类型

直接在子组件中定义

如图所示,现在的props是一个对象,如果再继续传一个字符串会怎样呢?

这个报错的意思就是说 它希望得到一个number,但得到的是一个string

prop的校验(完整校验)

上面说的是简单校验,只是识别一些类型而已,而完整校验有更多的功能,如下图

不过有一个地方需要注意,required 和 default 是互斥的,它们两个只需要写一个,大部分情况下用必填 required 如下图所示

看似这个代码写的太长了,为什么不用下面那一行的,因为他可以提示用户取值范围,所以还是写完整的比较好