其实网上很多方法,我这只是一个简单的demo,废话不多说直接上代码

import Taro, { Component } from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import './index.less' //子组件
class Child extends Component{
constructor(props) {
super(props);
this.state = ({ })
}
handleVal (event) {
this.props.handleEmail(event.target.value);
} render (){
return (
<div>
请输入邮箱:<input style="width:200px;height:30px;font-size:18px;" ref="emailDom" onChange={this.handleVal.bind(this)} />
</div>
)
}
}; export default class Index extends Component {
constructor(props) {
super(props);
this.state = {
email:"火星黑洞"
}
}
handleEmail1(date){
this.setState({
email:date
})
} config = {
navigationBarTitleText: '首页'
} componentWillMount () { } componentDidMount () { } componentWillUnmount () { } componentDidShow () { } componentDidHide () { } render () {
return (
<div className='index'>
<h3>子父传值</h3>
<Child name="email" handleEmail={this.handleEmail1.bind(this)}/>
<div>用户邮箱:{this.state.email}</div>
</div>
)
}
}

然后执行:cnpm run dev:h5

页面效果是:

taro中子父传值的更多相关文章

  1. vue 实现子向父传值

    父组件 <template> <div id="app"> <child @onChange='onChildValue'></child ...

  2. react hooks子给父传值

    子给父传值需要通过事件方法来传值,这里我们子组件是触发了一个点击事件传值: <Button onClick={()=>setshowregister(false)}>注册</B ...

  3. uniapp和vue 父向子传值、传方法及子向父传值。(一看就会超级简约)

    1.父向子传值:父组件在引用子组件时通过自定义属性绑定自身需要传递的值(数据),子组件用props:[  '自定义'  ]接收即可使用(props里数据是只读模式).(简约版:子绑定父的属性并用pro ...

  4. vue中子组件传值给父组件

    index.js 子组件 父组件

  5. vue子向父传值

    要弄懂子组件如何向父组件传值,需要理清步骤 子组件向父组件传值的步骤 一:子组件在组件标签上通过绑定事件的方式向父组件发射数据 <!--html--><template id=&qu ...

  6. 每天一点点之 taro 框架开发 - taro调用组件传值

    1.调用组件 组件文件 import Taro, { Component } from '@tarojs/taro' import { View } from '@tarojs/components' ...

  7. js中子父页面数据传递与方法调用

    A父页面 ,B为子页面 1.父页面调用子页面 A中调用B中方法:self.frames[iframeName].BFunction(); 注:iframeName:为父页面中iframe的name属性 ...

  8. iframe中子父窗口互调的js方法

    转载自:http://www.cnblogs.com/chinafine/archive/2011/09/15/2177746.html 一.父窗口调用iframe子窗口方法 1.HTML语法:< ...

  9. iframe中子父页面跨域通讯

    目录 #跨域发送信息 #跨域接收信息 #示例Demo 在非跨域的情况下,iframe中的子父页面可以很方便的通讯,但是在跨域的情况下,只能通过window.postMessage()方法来向其他页面发 ...

随机推荐

  1. 【iCore1S 双核心板_ARM】例程十六:USB_MSC实验——虚拟U盘

    实验步骤: 1.将SD卡插在SD卡槽中. 2.将跳线冒跳至USB_Device,将USB_Device通过Micor USB线与USB主机(电脑)相连. 3.烧写程序,我的电脑中将出现一个磁盘. 实验 ...

  2. macos下golang 1.9配置

    1.golang最新版本下载地址 https://golang.org/dl/ (下载与安装过程此处省略一万字) 注意,go1.9与以往版本安装不同,直接安装到/usr/local/go目录下,而/u ...

  3. C#编程高并发的几种处理方法

    并发(英文Concurrency),其实是一个很泛的概念,字面意思就是“同时做多件事”,不过方式有所不同.在.NET的世界里面,处理高并发大致有以下几种方法: 1,异步编程 异步编程就是使用futur ...

  4. tensorflow 调试tfdbg

    1.执行pip install pyreadline 安装pyreadline 2.修改对应代码如下 with tf.Session() as sess: sess.run(tf.global_var ...

  5. Android学习Scroller(五)——具体解释Scroller调用过程以及View的重绘

    PS: 该篇博客已经deprecated,不再维护.详情请參见  站在源代码的肩膀上全解Scroller工作机制  http://blog.csdn.net/lfdfhl/article/detail ...

  6. samba4.4security配置

    security=share在新版中已经被废弃了把security = share改为 security = user map to guest = Bad User 就可以了 [global] wo ...

  7. win PowerCmd命令行工具安装

    官网:http://www.powercmd.com/ 下载地址:http://www.powercmd.com/Install_PowerCmd.exe 版本信息: 输入注册码: PowerCmd ...

  8. [破解] IPhone 5S icloud dns bypass

    http://ui.iclouddnsbypass.com/deviceservices/buddy/barney_activation_help_en_us.buddyml http://www.j ...

  9. 11.14 luffycity项目(6)

    2018-11-14 21:26:45 实现了购物车功能! 涉及到了redis的使用  需要在pycharm中下载   django_redis 其他的看一下笔记,有购物车里面数据存储的结构才发现数据 ...

  10. 移动端如何用swiper实现导航栏效果

    在移动端如何用swiper实现导航栏效果 我们在写移动端的时候会有滑动和点击导航后滑动到目标页面功能:而这个功能如果自己写的话会很麻烦,所以我在这推荐一下swiper这个插件. 其实swiper中的官 ...