🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
# 组件默认值和数据类型验证 Vue组件中我们知道,父组件向子组件传递值时,是可以传递参数,如果不传递值时还可以给它指定默认值,并且传值时必须传指定类型的值。 # 给组件设置默认属性: 注意:defaultProps是一个静态属性前面 要加static > 在组件创建之前,会先初始化默认的props属性,这是全局调用一次,严格地来说,这不是组件的生命周期的一部分。在组件被创建并加载候,首先调用 constructor 构造器中的 this.state = {},来初始化组件的状态。 ```javascript //指定默认数据 static defaultProps ={ num:0 } ``` # 类型校验 [官方文档:]([https://react.docschina.org/docs/typechecking-with-proptypes.html](https://react.docschina.org/docs/typechecking-with-proptypes.html) >注意: 自 React v15.5 起,`React.PropTypes`已移入另一个包中。请使用[`prop-types`库(https://www.npmjs.com/package/prop-types)代替。 我们提供了一个[codemod 脚本](https://react.docschina.org/blog/2017/04/07/react-v15.5.0.html#migrating-from-reactproptypes)来做自动转换。 需要先安装`yarn add prop-types --save` 也是静态属性前面要加static ReactTypes这个名字是为了能区分. > 校验的目的是为了多人开发,如果传递数据出错会有提示,就请转换成期望的数据. ```javascript //指定校验 import ReactTypes from 'prop-types' static propTypes={ num:ReactTypes.number } ``` # 总结 设置默认值和类型校验和Vue中的目的是一样的。都是为了更好的多人开发。