其实网上很多方法,我这只是一个简单的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. 理解、学习与使用 JAVA 中的 OPTIONAL<转>

    从 Java 8 引入的一个很有趣的特性是 Optional  类.Optional 类主要解决的问题是臭名昭著的空指针异常(NullPointerException) —— 每个 Java 程序员都 ...

  2. sfc /scannow命令如何能用虚拟光驱完成修复?(xp下的办法)

    我们先光盘文件或用WinRAR压缩软件将ISO文件解压缩到本地磁盘某目录下,如e:\winxp:   在ISO文件上右击,在弹出的菜单中选择“解压到”:   文件较多,久等一会解压完成后文件夹下有很多 ...

  3. JSP通过AJAX获取服务端的时间,在页面上自动更新

    1.在页面上引入js <head> <meta http-equiv="Content-Type" content="text/html; charse ...

  4. mac:Go安装和配置+GoLand安装和使用之完整教程

    前言 作为一个go语言程序员,觉得自己有义务为go新手开一条更简单便捷的上手之路.纵使网上教程很多,但总不尽人意.go的入门门槛还是非常低的,无论是安装还是使用. go安装 go 语言支持以下系统:  ...

  5. 【OCP|OCM】Oracle培训考证系列

     [OCP|OCM]Oracle培训考证系列  我的个人信息 网名:小麦苗 QQ:646634621 QQ群:618766405 我的博客:http://blog.itpub.net/26736162 ...

  6. puppet(2)-资源介绍

    puppet- 资源介绍: 类型.属性与状态同实现方式分离.仅指定目标状态 type {'title': attribute => value, ... } 查看支持的资源类型: puppet ...

  7. Java中excel转换为jpg/png图片 采用aspose-cells-18.6.jar

    一  Java中excel转换为jpg/png图片 package com.thinkgem.jeesite.modules.task.util; import com.aspose.cells.Im ...

  8. c# 正则

    Regex reg = new Regex("^do(es)(xy)?$"); var result = reg.Match("doesxy"); foreac ...

  9. 【腾讯云的1001种玩法】 Laravel 整合微视频上传管理能力,轻松打造视频App后台

    版权声明:本文由白宦成原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/108597001488193402 来源:腾云阁 h ...

  10. Python学习之解决python下载第三方依赖速度慢的问题

    原因:通过pip命令直接下载,一般下载的资源存放在国外的服务器上,导致下载速度慢.下载过程中报错: 解决方法:通过pip的命令参数,从国内的下载源,国外的替换为国内的镜像,进行目标包的下载: 具体参数 ...