三种方式
-
父子组件之间
-
兄弟组件之间
-
跨组件层级
1.props的基本使用
步骤
1.在子组件身上自定义属性
2.子组件通过props接收
上图中state中定义了一个列表数据,并传给子组件,现在去子组件接受
子组件接受,解构,打印输出
就这么EZ
-------------------------------------
props的三个注意事项
1.可以传递任意数据
数字, 字符串, 布尔类型, 数组, 对象, 函数, jsx
2.只能读取对象中的属性,无法修改
3.单向数据流
也叫做:自上而下的数据流
1. 父组件中的数据可以通过 props 传递给子组件,并且,当父组件中的数据更新时,子组件就会自动接收到最新的数据
2. 父组件的数据更新会流动到子组件,不能反过来,子组件直接去修改父组件的数据
就好比瀑布,从上往下流,只能上游影响下游
--------------------------------------------------------------------
props的children属性
一句话:子组件标签体内的内容会存在props的children里面
这里在原有的基础上改了一下,继续去子组件那边打印props
EZ.....
----------------------------------------------------------------------------
如何实现子传父?
步骤:
1.父组件
1.定义一个回调函数(将会用于接收数据)
2.将该函数作为属性的值,传递给子组件
子组件
1.通过 props 获取
2.调用回调函数,并传入子组件的数据
上图中,调用了父组件的函数并传入参数
结果可以看到,成功修改父组件里的状态
--------------------------------------