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

一、使用场景

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

二、方法

父组件可以通过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})
	}
}
相关推荐
杰建云16720 小时前
微信小程序自制全流程实测与避坑指南
微信小程序·小程序
kyh10033811201 天前
微信小程序 聚合摇骰喝酒工具 完整实现(含源码)
微信小程序·小程序·摇骰子小游戏
Greg_Zhong1 天前
微信小程序中实现自定义圆形进度条
微信小程序·自定义圆形进度条
好赞科技1 天前
2026年五大精选微信小程序,革新效率体验提升智能生活品质
大数据·微信小程序
雯0609~1 天前
微信小程序的原生开发项目如何转至uni-app
微信小程序·小程序·uni-app
好赞科技2 天前
2026年最佳健身小程序推荐榜单,帮你解锁智能运动新体验
大数据·微信小程序
好赞科技2 天前
026年五大汽车保养预约小程序推荐榜单,让养车更轻松省心
大数据·微信小程序
azhou的代码园2 天前
基于微信小程序的图片识别科普系统的设计与实现
vue.js·spring boot·微信小程序·小程序·毕业设计·科普·图片识别
好赞科技2 天前
深度测评2026年最佳GEO流量精准获客工具排行榜,解锁你的营销新高度
大数据·微信小程序
深邃的眼2 天前
微信小程序从 0-1:从本地开发到部署服务器上线整体流程保姆式教学
阿里云·微信小程序·个人开发