其实网上很多方法,我这只是一个简单的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. [Unity]Unity常见API

    本文主要为了方便查阅 1. MonoBehaviour 生命周期 Awake 对象创建的时候调用,类似构造函数 Start 在Awake之后执行,区别在于,如果组件不可用(在Inspector没有勾选 ...

  2. rpc error: code = Internal desc = stream terminated by RST_STREAM with error code: PROTOCOL_ERROR

    使用grpc-go调用grpc服务端时,出现rpc error: code = Internal desc = stream terminated by RST_STREAM with error c ...

  3. 基于PHP给大家讲解防刷票的一些技巧

    刷票行为,一直以来都是个难题,无法从根本上防止. 但是我们可以尽量减少刷票的伤害,比如:通过人为增加的逻辑限制. 基于 PHP,下面介绍防刷票的一些技巧: 1.使用CURL进行信息伪造 $ch = c ...

  4. 一个简易的netty udp服务端

    netty号称java高性能网络库,为人帮忙中,研究了下,写了一个demo.反复调试,更改,局域网两个客户端同时for循环发10000个20字节的数据包,入库mysql,居然没丢. 思路,netty的 ...

  5. centos 7 IP不能访问nginx Failed connect to 185.239.226.111:80; No route to host解决办法

    服务器环境 centos 7.4 问题描述 1.可以ping通IP ,用IP访问nginx 不能访问,在服务器上curl localhost  curl 185.239.226.111可以获得 [ro ...

  6. 【CF666E】Forensic Examination 广义后缀自动机+倍增+线段树合并

    [CF666E]Forensic Examination 题意:给你一个字符串s和一个字符串集合$\{t_i\}$.有q个询问,每次给出$l,r,p_l,p_r$,问$s[p_l,p_r]$在$t_l ...

  7. java学习之路--多线程实现的方法

    1 继承Thread类 继承Thread类的方法尽管被我列为一种多线程实现方式,但Thread本质上也是实现了Runnable接口的一个实例,它代表一个线程的实例,并且,启动线程的唯一方法就是通过Th ...

  8. Oracle 修改表 Alter Table...

    --增加列ALTER TABLE Student add sex number(2);--删除列ALTER TABLE Student drop column sex;--更改列属性 ALTER TA ...

  9. vue里的样式添加之类名改动 和style改动

    类名下有不同样式,通过增加或者减少类名,来增加或减少样式. v-bind:class = {类名:变量,类名:变量...}  变量为布尔值,如果是true则类名添加,反正类名不添加到该元素身上 v-b ...

  10. 目前常用的加密算法有DES(Data Encryption Standard)和IDEA(International Data Encryption Algorithm)国际数据加密算法等,请用工厂方法实现加密算法系统。提交该系统的代码,该系统务必是一个可以能够直接使用的系统,查阅资料完成相应加密算法的实现;

    1.加密算法的类图结构 2.源代码 2.1代码运行截图 2.2代码的目录结构 2.3具体代码 MethodFactory.java package jiami; public interface Me ...