Taro - 父子组件间通信

最近入坑了一波Taro,打算重构当前手上的原生小程序项目。

但是这个文档和版本啊搞得人头大,真的是边踩坑边成长。

我是用的Taro 1.x版本中的1.3.42.(恐版本之间差异致使当前版本可使用的方法不可用,基本是小概率事件)。

先说父 - 子 传值,这个和小程序基本一样不过是格式和方法名不一样。

这是微信小程序父组件往子组件传值的方式。如果有直接上手小程序框架的同学不了解原生组件间传值的可看下面这个链接

https://blog.csdn.net/qq_42228073/article/details/106396470

父组件内子组件引用的地方传值定义传值Name且把值传入

子组件内Properties接收

 Taro 中父组件往子组件传值的方式

父组件内子组件引用的地方传值定义传值Name且把值传入

Taro - 父子组件间通信_第1张图片

在子组件内直接使用this.props.后面接上在父组件内定义往子组件传值的名称即可。

Taro - 父子组件间通信_第2张图片

接下来是子到父的传值 (其实这个和小程序子到父也基本一样不过是格式和方法名不一样);

这是小程序的在子组件内完成某个用户行为之后在父组件内监听,就是子组件向父组件传值。

在子组件内某个行为的回调内,监听传值

Taro - 父子组件间通信_第3张图片

在父组件内监听获取子组件的值

Taro - 父子组件间通信_第4张图片

 

Taro 中 子 - 父组件间的传值

监听事件必须以on开头后面写什么无所谓,可以定义多个。

且还需要,这个监听事件名要传入this。例如:onTrigger= {this.handEvent.bind(this)}

在子组件内通过this.props.加上在父组件内以on开头的监听名即可监听且传值给父组件。

Taro - 父子组件间通信_第5张图片

最后在父组件接收子组件传递的值,就可以了。

Taro - 父子组件间通信_第6张图片

希望以上阐述能对有幸看到的同鞋有所帮助。

你可能感兴趣的:(Taro - 父子组件间通信)