react 父子 --- 子父通讯

介绍

组件通讯的几种方式：

父子⬅⬅
子父（反向数据流）
中间人（兄弟之间父做中间人）
转发 refs （refs 的使用）
context组件上下文（react 中的四大实例 {state,props,refs.,context}） ⬅⬅
订阅发布
路由
web 存储（cookie等）
状态管理 ⬅⬅⬅

父子

就是父组件里面调用子组件，给子组件去传递数据，然后子组件里面是可以拿到这个数据的

<Child 属性=数据/> 父组件调用子组件并传值

例：<List list={list}></List>    //父组件内书写

this.props.属性 子组件调取

例：console.log(this.props.list)   //子组件内书写

案例展示：

//父组件
class App extends React.Component{state={content:"你好"};render(){return (<div><List content={this.state.content}/></div>)}
}

//子组件
class List extends React.Component{render(){return (<div><li>{this.props.content}</li>   //接收父组件传递过来的值</div>)}
}

子父

把父的方法绑给子，作为子的props 传递下去，子通过恰当的时机通过 props 身上的属性调用这个属性，如同在调用父这个方法，只要把子的属性在调用父方法的时候传过去，父的方法就能接受到，这就是反向数据流

<Child 属性=父方法/> 父的方法绑给子，作为子的props传递下去

例：<List add={this.add}></List>

this.props.属性(子数据) 子通过 props 身上的属性调用这个属性，如同在调用父这个方法

例：<button onClick={()=>{this.props.add(xxx)}}></button >

案例展示：

//父组件
class App extends React.Component{state={content:"你好"};add = (e)=>{console.log(e)}render(){return (<div><List content={this.state.content} add={this.add}/>   //将父的方法传递到子里面</div>)}
}

//子组件
class List extends React.Component{render(){return (<div><li>{this.props.content}</li>   //接收父组件传递过来的值<button onClick={()=>{this.props.add(123)}}></button>  //调用父方法  </div>)}
}

结果展示：

中间人

如果一个父组件调了两个子组件，一个 a ，一个 b，那么我们在 a 组件中调用这个父方法，把数据传过来，那么父就拿到了，父再把接受到的 a 再想办法绑定到 b 的身上。

就是子父传递过去，第三个弟弟组件再次调用（参考子父代码）

<ChildA 属性=父方法/>
<ChildB 属性=接受的a数据/>

react 父子 --- 子父通讯相关推荐

this指向-作用域、作用域链-预解析变量提升-Vue组件传值父子子父非父子-Vue数据双向绑定原理
目录 this指向作用域.作用域链预解析变量提升 Vue组件传值父子子父非父子 Vue数据双向绑定原理 1.this指向函数的this指向看调用.不看声明 (1)普通函数调用 ①函数名 ...
生命周期数据共享[父子-子父-兄弟]ref引用数组复习
目录一.组件的生命周期& 生命周期函数 1. 生命周期 & 生命周期函数 2.组件生命周期函数的分类 3.生命周期图示[重要] 二.组件之间的数据共享 1. 组件之间的关系 2. 父 ...
React组件进阶--组件通讯介绍，组件的 props特点，组件通讯的三种方式子到父，父到子，兄弟到兄弟组件，Context，回顾练习
1.组件通讯介绍组件是独立且封闭的单元,默认情况下,只能使用组件自己的数据(state). 在组件化过程中,我们将一个完整的功能拆分成多个组件,以更好的完成整个应用的功能. 而在这个过程中,多个组 ...
uniapp 子组件 props拿不到数据_总结下React组件间的通讯
这是个老话题了. 随着组件化开发成为主流,每个组件都有完善的生命周期,大家可以在生命周期内做一些事情,每个组件有自己的状态管理机制.同时,每个组件都是独立的.这能提高大家的开发效率,规范化开发. 今天 ...
react 子传参父_react子父传参有几种方法？
react子父传参有几种方法?下面本篇文章给大家介绍一下react父子组件传参(值)的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. react父子组件传参(值)的几种方法一 ...
vue中父子组件先后渲染_VUE如何实现子父组件、父子组件、兄弟组件传值
父子组件传值: 父组件定义: 代码示例子父组件传值: 父组件方法定义: 子组件执行父组件方法定义: methods: { closeOrOpenLeftMenu() { if (this.isLef ...
Vue.js-Day03-PM【组件通信（安装Vetur插件、父子组件通信、子父组件通信）、项目发送与启动（项目发给别人、启动别人的项目）】
Vue.js实训[基础理论(5天)+项目实战(5天)]博客汇总表[详细笔记] 目录 6.组件通信安装 Vetur 插件 6.1.父子组件通信子定义props 父组件模板图解 6.2.子父组 ...
springcloud 创建子父项目_idea搭建springCloud----搭建父子项目（二）
今天介绍一下 : idea 搭建父子项目父项目:springCloud_ht 子项目:eureka_server(注册中心) 1-1.新建父项目: 1-2 起名称 springCloud_ht 1- ...
Vue 进阶组件实战应用 -- 父子组件传值的应用实例（子父组件传值的两种触发方式）
基础的子组件和父组件通信已经搞定了,可以看此博客父子组件传值基础应用需求现在需求是在一个父页面引用子组件,不只是要实现基本的父子组件传值.并且子组件给父组件传值的触发条件要在父页面触发. 目前小 ...
Vue3中的父子、子父组件通信
Vue3中的父子.子父组件通信方式总结李俊才的CSDN博客 CSDN用户名:jcLee95 邮箱:291148484@163.com 1. 父组件 => 子组件 | 使用props 父组件(分 ...

react 父子 --- 子父通讯

react 父子 --- 子父通讯相关推荐

最新文章

热门文章

react 父子 --- 子父 通讯

react 父子 --- 子父 通讯相关推荐

最新文章

热门文章

react 父子 --- 子父通讯

react 父子 --- 子父通讯相关推荐