[淘宝小程序] 父子组件方法传递

2024-04-20 10:47:03

子向父传递方法

1.在父组件（本文中用的是一个页面）中引入子组件"myComponent"

在[pageName].json中输入

{"usingComponents": {"my-component": "../../components/myComponent/myComponent"}
}

支付宝小程序要求文件夹名与组件名一致，引用名不能大写，且引入组件时只需输入名称，不需要扩展名，相关的js，acss，axml，json会一起引入。所以这里会出现两级"myComponent"。

2.在父组件axml中使用myComponent并设置ref

<view><my-component ref="myRef">
</view>

3.在父组件js文件中引用ref

Page({// ...省略其他属性...myRef(ref) {this.myChild = ref; // 将子组件的引用与父组件绑定，方便其他方法使用},onClick() {this.myChild.onChange(); // 调用子组件的onChange()方法}
});

在axml文件中ref属性定义的方法，其参数为组件本身。

4.子组件myComponent只需要在js文件中定义onChange()方法就可以了

Component({// ...省略其他属性...onChange() {console.log('子组件响应')}
});

注意：以上功能要先开启“component2”编译功能才能使用。（在小程序开发工具界面->详情中勾选）

父向子传递方法

1.父组件中引入子组件（与之前所述相同）

2.父组件js文件中定义方法

Page({// ...省略其他属性...tapChild() {console.log('子组件点击')}
});

3.父组件axml文件中向子组件传递方法

<view><my-component onTapChild="tapChild">
</view>

这里两点很神奇的地方请注意：

1)支付宝小程序要求，进行方法传递时，axml中的属性名必须以on开头，否则视为一般属性

2)当像后代传递方法时，不要写双大括号（与一般传参区分）

4.子组件js中引用

Component({// ...省略其他属性...onTap() {this.props.onTapChild();}
});

这里稍微提一点，小程序要求方法带on，同时，通过props获取到的方法名一样是带on的，不要把on拿掉（我以为是分开的，曾经拿掉过，然后就undefined了）

[淘宝小程序] 父子组件方法传递相关推荐

微信小程序父子组件方法调用方法汇总
父组件向子组件传值父组件通过属性传值 <childEle childParams="{{params}}"></childEle> 子组件通过proper ...
淘宝小程序的坑（持续更新）
1. 淘宝小程序 ui 组件更新缓慢(基本不更新) form组件 onFormChange 当formItem field 没有值的时候返回对应的name 为空 tab 返回的index 会加上 ...
淘宝小程序游戏迁移Laya引擎
淘宝小程序游戏迁移Laya引擎 1. 目录结构 bin -- 当前项目的输出文件 laya -- 存放UI项目 assets -- 图片,音频资源目录 pages -- .scene 场景文件 key ...
哔哩哔哩淘宝小程序盲盒抽奖实践
目录背景名词解释整体业务流程技术实现调用链路云开发( Serverless ) 云开发的限制编写云函数怎么拿到授权查询轻店铺用户订单轻店铺云网关数字签名网关网关技术选型 Vert ...
微信小程序父子组件传值问题
微信小程序父子组件传值问题把自己碰到的问题或者学到的东西在这里总结,慢慢积累在父子组件传值时,我发现子组件竟然拿不到父组件传过来的值. 我指的拿不到父组件的值,是指在子组件的生命周期created ...
淘宝小程序体验优化：数据分析和优化实践
作者:莫绪旻(向屿) 淘宝小程序已经走过若干个双十一,淘宝开放业务有序铺开.体验优化是个老生常谈的话题,如何让小程序跑得又稳又快,成了我们最大的挑战之一. 写在前面如何定义好的体验过去我们定义这个 ...
超详细淘宝小程序的接入开发步骤
本文是向大家介绍的关于工作中遇到的如何对接淘宝小程序开发的步骤,它能够帮助大家省略在和淘宝侧对接沟通过程中的一些繁琐问题,便捷大家直接快速开展工作~~ 一.步骤演示 1.首先我们打开淘宝开放平台,进入 ...
淘宝小程序（商家应用）开发提前需要了解的一些概念
规定:淘宝小程序即淘宝商家应用.下文中只称作淘宝小程序,二者概念一致. 一:概念和业务场景概念: 因为淘宝小程序是从支付宝小程序迁移过来的.用的同一套框架.所以你需要先通读一遍商家应用文档(淘宝小程 ...
淘宝小程序还可以这么玩！私域互动实践总结
简介:小程序创意互动项目,作为淘宝购物小程序全面提升消费体验和满足商家个性化运营的重点项目之一,从 2020 年 3 月底正式 KO 到今年双11,已经经历了多次迭代.在购物小程序技术.产品.运营团队 ...

最新文章

热门文章