react 组建件数据传递

父传子:最简单也是最基础的一种数据传递方式

父组件:

图片.png

父组件中调用子组件并将数据放入 datas 中传给子组件,子组件通过 props 进行调用。

子传父:
1、子组件调用父组件的方法:
父组件:

图片.png

子组件:

图片.png

2、ref 形式:
在父组件中调用子组件 CarItem,并命名 ref 属性值为 changeState

图片.png

在父组件中合适的地方触发调用子方法的方法,然后开始与子组件通信,调用子组件中对应的方法。

图片.png

子组件:

图片.png

同级组件数据传递:
1、以父级作为中介进行传递。
2、pub /sub
A组件:

图片.png

B组件:

图片.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 自己最近的项目是基于react的,于是读了一遍react的文档,做了一些记录(除了REFERENCE部分还没开始读...
    潘逸飞阅读 3,511评论 1 10
  • It's a common pattern in React to wrap a component in an ...
    jplyue阅读 3,317评论 0 2
  • 深入JSX date:20170412笔记原文其实JSX是React.createElement(componen...
    gaoer1938阅读 8,111评论 2 35
  • 161223 清早六点的埃及,夜色还未褪去。 和新舍友前往水果摊的路上,经历胆战心惊。 25埃镑买到一整提水果,被...
    XxXxXxN阅读 255评论 0 0
  • 六一节到了,我一大早收拾完就去学校,我坐在教室里 看大哥哥大姐姐在表演,我觉得很精彩,表演结束后就放学了, 到了下...
    胡雅彤阅读 421评论 0 0