关于前端:Vue组件prop的验证

7次阅读

共计 554 个字符,预计需要花费 2 分钟才能阅读完成。

1.prop:通常用于组件间的通信(父传子)

2. 一般的 prop:

渲染后果:

但因为这种写法难以验证,如果在公司中写这种代码,前期的保护等会产生很多的麻烦

举个例子:

再来看看渲染后果:

?????????wtf

并且不会有任何的提醒。。。
3. 高级的 prop:
为了防止下面的问题,通常须要对 prop 进行验证
(1)类型验证:

来看后果:

抛错了:我要数组你给我个 2 是什么意思?霎时清晰了许多。

那么类型都有哪些呢:String、Number、Boolean、Array、Object、Date、Function、Symbol、以及自定义的构造函数。而 Null 和 Undefined 可能通过任何的类型验证。

同时还能够承受多个类型,例如:[String、Array],
(2)默认值:在不传值时显示

后果:

这里提醒必须应用工厂函数返回默认值,但并不会影响展现

后果:

(3)是否为必传的值:

看后果:

这里提醒必须传入 props,但可能展现默认值

再看后果:

好的没有问题
(4)自定义验证:

在 validator 函数中能够写入你的验证逻辑,承受的 prop 参数就是



和它

看后果:

正告,传入的 props 查看失败!

最初总结:prop 的应用通常被写的太过简略(我本人),在写了一堆本人都没眼看的代码后,分明的意识到,能让他人看懂本人的代码,是如许重要的一件事!

正文完
 0