当前位置: 首页 > Web前端 > vue.js

Vue组件prop的验证

时间:2023-03-31 23:41:18 vue.js

1.prop:通常用于组件之间的通信(父子)2.普通prop:渲染结果:但是因为这种写法很难验证,如果你写这种代码在公司,后期维护会带来很多麻烦。例如:我们来看看渲染结果:?????????wtf并且不会有任何提示。..3、进阶道具:为了避免以上问题,通常需要对道具进行验证(1)类型验证:看结果:错误抛出:我要数组,给我2是什么意思?顿时清晰了许多。那么有哪些类型:String、Number、Boolean、Array、Object、Date、Function、Symbol和自定义构造函数。Null和Undefined可以通过任何类型验证。同时也可以接受多种类型,如:[String,Array],(2)默认值:不传值时显示结果:这里提示必须使用工厂函数返回默认值,但不影响显示结果:(3)是否为必填值:查看结果:这里提示必须传入props,但可以显示默认值,然后查看结果:OK,没问题(4)自定义验证:你可以在validator函数中写你的验证逻辑,接受的prop参数是这个,它看到的结果是:警告,传递的props检查失败!最后总结:prop的使用通常写的太简单了(我自己)。在写了一堆连自己都没看过的代码之后,我才清楚地意识到让别人看懂我的代码是多么的重要。事物!