Vue组件prop的验证

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

2.普通的prop:
Vue组件prop的验证_第1张图片
但由于这种写法难以验证,如果在公司中写这种代码,后期的维护等会产生很多的麻烦

举个例子:
Vue组件prop的验证_第2张图片
抛错了:我要数组你给我个2是什么意思?瞬间清晰了许多。

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

同时还可以接受多个类型,例如:[String、Array],
(2)默认值:在不传值时显示
Vue组件prop的验证_第3张图片
和它

看结果:
Vue组件prop的验证_第4张图片
警告,传入的props检查失败!

最后总结:prop的使用通常被写的太过简单(我自己),在写了一堆自己都没眼看的代码后,清楚的意识到,能让别人看懂自己的代码,是多么重要的一件事!

你可能感兴趣的:(前端,vue.js,javascript)