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来接收父亲传来的参数
注意这里在React里面使用变量什么等等 是 { } 这里和Vue是{ { } }
二:子传值父接收
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就可以)
今天就到这里 谢谢大家 溜了溜了