【微信小程序】父组件修改子组件数据或调用子组件方法

一、使用场景

页面中用到了自定义组件形成父子组件关系,在父组件某个特定时期想要操作子组件中的数据或方法,比如离开页面的时候清空子组件的数据。

二、方法

父组件可以通过this.selectComponent方法获取子组件实例对象,这样就可以直接访问组件的任意数据和方法

调用时需要传入一个匹配选择器 selector

(1)父组件

wxml 复制代码
<child class="my-component"></child>
javascript 复制代码
let childObj = this.selectComponent('.my-component')
childObj.setData({currentValue: ''})
childObj.updateData()

父组件将会获取 class 为 my-component 的子组件实例对象,即子组件的 this

(2)子组件

wxml 复制代码
<view>当前值为:{{currentValue}}</view>
javascript 复制代码
data() {
  currentValue: ''
},
methods: {
	updateData() {
		this.setData({currentValue: 1})
	}
}
相关推荐
海纳百川·纳海川5 小时前
数字化升级,让废品回收更简单高效
大数据·微信小程序·小程序
VX_bysjlw98510 小时前
基于微信小程序的宠物用品商城系统-后端74346-计算机毕设原创(免费领源码+带部署教程)
java·redis·微信小程序·eclipse·mybatis·idea·微信开发者工具
一只昀14 小时前
基于微信小程序的咖啡店点餐小程序
微信小程序·小程序
admin and root3 天前
「移动安全」安卓APP 反编译&frida脱壳技巧分享
android·开发语言·python·web安全·微信小程序·移动安全·攻防演练
m0_462803884 天前
【无标题】
微信小程序
码农学院5 天前
微信小程序云开发实战:扫码点餐系统的高并发订单处理与外卖接单架构
微信小程序·架构·notepad++
这是个栗子6 天前
uni-app 微信小程序开发:常用函数总结(一)
微信小程序·小程序·uni-app·getcurrentpages
爱勇宝6 天前
上线 20 多天后,我才发现小程序的图片上传一直不可用
微信小程序·智能小程序
万亿少女的梦1688 天前
基于微信小程序、Spring Boot与Vue3的智慧养老管理系统设计与实现
spring boot·redis·微信小程序·mybatis·vue3
alxraves9 天前
零代码AI助手:用大模型自动生成微信小程序界面与逻辑
人工智能·微信小程序·notepad++