react native 子组件向父组件传值

父组件:

引入子组件:import CheckBox from  ‘../checkbox‘;

父子之间交互通信,接受子组件的值

fn(val){
this.setState({
roleType:val
});
}

//调用通信

<CheckBox data={this.state.roleType} isRow={styles.isRow} fn={this.fn.bind(this)}/>

子组件:

其中fn里面传递的值为要传递给父组件的值

onPress={()=>{
this.props.fn(this.state.data)
}}

原文地址:https://www.cnblogs.com/yuxingxingstar/p/9852960.html

时间: 2024-11-05 23:35:55

react native 子组件向父组件传值的相关文章

react native 之子组件和父组件之间的通信

react native开发中,为了封装性经常需要自定义组件,这样就会出现父组件和子组件,那么怎么在父组件和子组件之间相互通信呢,也就是怎么在各自界面push和pop.传值. 父组件传递给子组件: 父组件: 在主组件里面,使用通过写一个子组件的属性,直接把值或者navigator传给子组件即可.如下20行: 1 /** 2 * Sample React Native App 3 * https://github.com/facebook/react-native 4 * 父组件传递给子组件 5

vue2.0 子组件和父组件之间的传值

Vue是一个轻量级的渐进式框架,对于它的一些特性和优点在此就不做赘述,本篇文章主要来探讨一下Vue子父组件通信的问题 首先我们先搭好开发环境,我们首先得装好git和npm这两个工具(如果有不清楚的同学请自行百度哦) 环境搭建步骤: 打开git ,运行 npm install --global vue-cli 这是安装vue的命令行 vue init webpack vue-demo 这是vue基于webpack的模板项目 cd vue-demo 进入vue-demo文件夹 npm install

React子组件和父组件通信

React子组件和父组件通信包括以下几个方面: 子组件获取父组件属性:props或者state 子组件调用父组件的方法 父组件获取子组件的属性:props或者state 父组件调用子组件的方法 我们从下面这个例子来详细了解: 1 var Father=React.createClass({ 2 getDefaultProps:function(){ 3 return { 4 name:"父组件" 5 } 6 }, 7 MakeMoney:function(){ // 挣钱,供子组件调用

React篇-子组件调用父组件方法

react 中子组件调用父组件的方法,通过props: 父组件: <div className="tabC01"> <FTab tabCon={'tabCon01'} note={()=>this.isNote()}/></div> 子组件: <span className="wh01" >股票持仓(前十)<img src={require("../../image/[email protecte

【转】Vue组件一-父组件传值给子组件

Vue组件一-父组件传值给子组件 开始 Vue组件是学习Vue框架最比较难的部分,而这部分难点我认为可以分为三个部分学习,即 组件的传值 - 父组件向子组件中传值 事件回馈 - 子组件向父组件发送消息,父组件监听消息 分发内容 整个博客使用的源代码-请点击 所以将用三篇博客分别进行介绍以上三种情况和使用 Vue的设计者对组件的理解 Vue的设计者,对组件和父组件之间的关系流上做了阐述,即单向数据流图:父组件向子组件传递数据,子组件回馈事件 组件意味着协同工作,通常父子组件会是这样的关系:组件 A

vue---slot插槽实现 子组件向父组件传值

1.slot插槽作用域:带参数的插槽(可进行子组件向父组件传值) 父组件中: 在组件标签内部加一个template标签 在template标签上加一个属性scope 值随意书写 子组件中: 在组件内部用slot进行传值,如果给slot加一个自定义属性,那么在组件标签的template的scope上面就可以进行接收到,接收到的为一个对象 父组件app.vue <template> <div id="app"> <son-com> <!-- 必须用

Vue_(组件通讯)子组件向父组件传值

Vue组件 传送门 子组件向父组件传值:子组件通过$.emit()方法以事件形式向父组件发送消息传值: 使用步骤: 1.定义组件:现有自定义组件com-a.com-b,com-a是com-b的父组件: 2.准备获取数据:父组件com-a要获取子组件data中的height属性: 3.在子组件com-b中,需要用$.emit()方法将数据以事件的形式发送,$.emit('sendData', data, data…),红色的部分事件名可自定义,数据可传递多个: 4.在父组件中使用子组件的地方 <c

Vue 组件&amp;组件之间的通信 之 子组件向父组件传值

子组件向父组件传值:子组件通过$.emit()方法以事件形式向父组件发送消息传值: 使用步骤: 定义组件:现有自定义组件com-a.com-b,com-a是com-b的父组件: 准备获取数据:父组件com-a要获取子组件data中的height属性: 在子组件com-b中,需要用$.emit()方法将数据以事件的形式发送,$.emit('sendData', data, data…),红色的部分事件名可自定义,数据可传递多个: 在父组件中使用子组件的地方 <com-b @自定义事件名='getD

父组件接收子组件事件的参数===子组件给父组件传值===子组件调用(绑定)父组件的方法

子组件调用(绑定)父组件的方法===父组件接收子组件事件的参数===子组件给父组件传值 就相当于父组件给子组件传递了一个方法,子组件触发这个方法,也就相当于父组件调用了这个方法 可以说是互相影响,数据双向绑定 子组件 <div @click="clickCell(参数)"> props:{ clickCell:{ type:Function, default: function(){} } } 父组件 <子组件名 :clickCell="dealClickC

Vue 第八章 子组件向父组件传值

1.子组件向父组件传值步骤 1.父组件定义一个方法 methods:{ show(data){ this.fumsg = data; console.log("父组件数据"+data) } } 2.子组件通过事件绑定调用父组件方法 <!-- 父组件向子组件传递方法,使用事件绑定机制 v-on --> <com2 v-on:func="show"></com2> <h1>h还没有值:{{fumsg}}</h1>