浅谈React 一父子传值（一，旧版）

最新推荐文章于 2024-04-01 16:36:28 发布

Liingot

最新推荐文章于 2024-04-01 16:36:28 发布

阅读量375

点赞数

分类专栏： react 文章标签： React

本文链接：https://blog.csdn.net/weixin_39773218/article/details/85159850

版权

3 篇文章 0 订阅

订阅专栏

Hello！大家早上好，最近在知乎上看到有些人在评论说vue好呢？还是react好呢？一系列问题之后vue开发者也写了一篇文章哈哈说明了一下这个问题这里咱们就不具体说作者的观点了，弄的我好奇心就上来了我也抽空学习了一点点的react今天在这里给大家分享一下。

React父子之间的传值

项目结构
在这里插入图片描述

一：父传值子接收

这里的父页面给子页面传参，子页面接受参数的方法和vue十分的相似这里咱们可以先回顾一下vue的父传子子接受

  父页面给子页面传参:  <Child   :userid = ' 你好Vue '></Child>
  
  子页面接收 : 使用props属性来接收     props:[ " userid " ]

React和这个也是十分的相似话不多说直接看代码
在这里插入图片描述
index.js上面有说这是最大父亲，这是父亲是在给Content这个儿子传了2个参数（userid,userName）和Vue不同的是前面不需要加 " : " ，接下来看看Content子页面的接收：

加上以后就是使用咱们的props来接收父亲传来的参数
在这里插入图片描述

二：子传值父接收

Vue:
子组件： this.$emit(" data " , " 我是给父组件传的数据 ");
父组件：通过自定义事件接收 @data=“data”

	  methods:{
	       data( e ){
	           console.log(e);   //我是给父组件传的数据
	        }
	  }

React:
子组件给父组件传值（通过方法来传值）
前提：需要父组件给子组件把方法传过去，子组件通过this.props.方法名来接收方法
在这里插入图片描述

子组件接收models

通过onChange的方法接收到父页面传来的方法models来实现给父亲传值

源码地址： https://github.com/Liingot/react-demo （以后跟新React知识源码都在这里大家到时候直接pull就可以）

今天就到这里谢谢大家溜了溜了

关注