组件参数校验与非Props特性

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

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

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

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

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

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

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

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

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

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

这样子就可以了

这就是组件参数校验了

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

type表示必须的类型,

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

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

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

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

还有自定义校验器

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

hello world 正常执行

报错了

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

Props特性和非Props特性

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

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

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

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

非Props特效

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

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

2,

那么,我们现在不用

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值