taro中子父传值
其实网上很多方法,我这只是一个简单的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中子父传值的更多相关文章
- vue 实现子向父传值
父组件 <template> <div id="app"> <child @onChange='onChildValue'></child ...
- react hooks子给父传值
子给父传值需要通过事件方法来传值,这里我们子组件是触发了一个点击事件传值: <Button onClick={()=>setshowregister(false)}>注册</B ...
- uniapp和vue 父向子传值、传方法及子向父传值。(一看就会超级简约)
1.父向子传值:父组件在引用子组件时通过自定义属性绑定自身需要传递的值(数据),子组件用props:[ '自定义' ]接收即可使用(props里数据是只读模式).(简约版:子绑定父的属性并用pro ...
- vue中子组件传值给父组件
index.js 子组件 父组件
- vue子向父传值
要弄懂子组件如何向父组件传值,需要理清步骤 子组件向父组件传值的步骤 一:子组件在组件标签上通过绑定事件的方式向父组件发射数据 <!--html--><template id=&qu ...
- 每天一点点之 taro 框架开发 - taro调用组件传值
1.调用组件 组件文件 import Taro, { Component } from '@tarojs/taro' import { View } from '@tarojs/components' ...
- js中子父页面数据传递与方法调用
A父页面 ,B为子页面 1.父页面调用子页面 A中调用B中方法:self.frames[iframeName].BFunction(); 注:iframeName:为父页面中iframe的name属性 ...
- iframe中子父窗口互调的js方法
转载自:http://www.cnblogs.com/chinafine/archive/2011/09/15/2177746.html 一.父窗口调用iframe子窗口方法 1.HTML语法:< ...
- iframe中子父页面跨域通讯
目录 #跨域发送信息 #跨域接收信息 #示例Demo 在非跨域的情况下,iframe中的子父页面可以很方便的通讯,但是在跨域的情况下,只能通过window.postMessage()方法来向其他页面发 ...
随机推荐
- IMAP 读取含有附件邮件超慢问题
添加以下配置: Properties props = new Properties(); props.setProperty("mail.imap.partialfetch", & ...
- 解决Chrome 70版本以后谷歌不再信任赛门铁克证书问题
Google 从 2018 年 10 月发布的 Chrome 70 就停止信任赛门铁克的旧证书了,而 Mozilla 也将在 10 月底发布 Firefox 63 时停止信任赛门铁克的旧证书. 导致大 ...
- Oracle分析函数-first_value()和last_value()
first_value()和last_value()字面意思已经很直观了,取首尾记录值.例:查询部门最早发生销售记录日期和最近发生的销售记录日期 select dept_id ,sale_date , ...
- 【转】WPF自定义控件与样式(10)-进度控件ProcessBar自定义样
一.前言 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等. 本文主要内容: ProcessBar自定义标准样式: ProcessBar自定义环形进 ...
- babel配置项目目录支持转换es6语法,引入非项目目录js后,引入Js转换无效
我遇到了一个问题,我在已经配置babel的项目中通过require引入了一个项目目录外层的另一个js文件,前期是可以成功转换并打包的,但是到了后期就不行了,报错: 这个报错的意思是,引入的js文件中有 ...
- 四、Sql Server 基础培训《进度4-插入数据(实际操作)》
知识点: 假设有订单表 CREATE TABLE Order ( ID int identity(1,1) not null primary key, --内码 BillNo varchar(100) ...
- HTTP 请求头 WIKI 地址
https://en.wikipedia.org/wiki/List_of_HTTP_header_fields
- vue filters 时间戳转化成时间格式
vue filters 时间戳转化成时间格式 filters: { formatDate: function (time) { var re = /-?\d+/ var m = re.exec(tim ...
- tomcat启动出错 invalid LOC header
tomcat启动出错 invalid LOC header,run as maven test 没有报错,只有警告: 'build.plugins.plugin.version' for org.ap ...
- 1.13flask完结
2019-1-13 14:16:26 终于完结flask,开始爬虫啦!!!! 还有 一些爬虫视频没看完,余下的就一点啦! 老师整理了flask的总结!和一些组件的使用! 打算重装一下电脑,边看视频,边 ...