004_React 父子组件之间传值和调函数

  • 父组件向子组件传值 

在父组件中直接将值写入组件标签参数中,然后写入数据即可

而子组件中接收此参数直接使用this.props.参数名  即可拿到父组件传递的参数。

例子:

004_React 父子组件之间传值和调函数

 004_React 父子组件之间传值和调函数

 

相比于Vue直接在实例当中的props字段中限定传入参数的类型,React需要引入额外的拓展  prop-types

004_React 父子组件之间传值和调函数

对于传入期望类型不符的参数则会报错

004_React 父子组件之间传值和调函数

注意,定义参数类型的对象要定义在实例外面

如果想要参数不传递就报错,这就需要使用isRequired关键字了,它表示必须进行传递,如果不传递就报错。

004_React 父子组件之间传值和调函数

 

子组件调用父组件的函数

与Vue的$emit不同的是,React的子组件调用父组件的方式同样是使用this.props.函数名,

在子组件中通过this.props.函数名(参数)调用在父组件中写在子组件标签中的函数即可,注意父组件的函数同样要绑定this

例子

004_React 父子组件之间传值和调函数

004_React 父子组件之间传值和调函数