首先我们先正常显示一个hello world

组件参数校验与非Props特性

组件参数校验与非Props特性

组件参数校验与非Props特性

发现可以正常显示,控制台也不会报错

那现在我们对父组件传递的content有一个类型要求,那么props里面就可以直接写一个对象,对象里面的key值就是我们传递的数据名,值就是类型名

组件参数校验与非Props特性

那么,我现在把hello world改成123

组件参数校验与非Props特性

组件参数校验与非Props特性

组件参数校验与非Props特性

页面也可以正常显示,而且也不报错

我们在content前面加一个冒号,他表示后面引号里的内容是一个表达式,所以传入的是数字123

组件参数校验与非Props特性

这样子的话,控制台就会报错

组件参数校验与非Props特性

说期望是一个String,却得到了一个Number,所以改成Number就不会报错了

组件参数校验与非Props特性

组件参数校验与非Props特性

那么,当我们既想要数字类型,又想要字符串类型怎么办呢?

可以直接写成一个数组形式

组件参数校验与非Props特性

这样子就可以了

这就是组件参数校验了

当然这个组件参数校验还可以写的更加复杂

组件参数校验与非Props特性

type表示必须的类型,

然后required表示是否必须,我现在把content删除掉,然后required必须

组件参数校验与非Props特性

就会报错,写出缺失必要content

组件参数校验与非Props特性

现在,把required置为false,然后加上default,default表示默认值

组件参数校验与非Props特性

组件参数校验与非Props特性

当content里面有内容时,就不会填写默认值

还有自定义校验器

组件参数校验与非Props特性

value为content的值,所以就是判断长度是否大于5,小于5就报错

组件参数校验与非Props特性

hello world 正常执行

组件参数校验与非Props特性

组件参数校验与非Props特性

报错了

----------------------------------------------------------------------------------------------------------------

Props特性和非Props特性

组件参数校验与非Props特性

当父组件里面内容传递或者说内容声明,然后再props里面有一个对应的内容接收(定义了一个和父组件相同的内容属性名字)

这种形式属性就叫做Props特性

1,内容声明是不会在dom里面显示的

组件参数校验与非Props特性

2,在子组件接受之后就可以使用插值表达式来取得内容声明里面的内容

组件参数校验与非Props特性

非Props特效

1,父组件向子组件传递了属性,但是子组件缺并没有props的接收

组件参数校验与非Props特性

组件参数校验与非Props特性

首先,页面就会报错,这是因为你用了content,

2,

组件参数校验与非Props特性

那么,我们现在不用

组件参数校验与非Props特性

说明,这个时候,我们声明的属性会展式在子组件最外层的标签上

相关文章: