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

一、使用场景

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

二、方法

父组件可以通过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})
	}
}
相关推荐
JudithHuang1 天前
受够了带广告的单位换算 App,我自己做了一个微信小程序
微信小程序
小羊Yveesss2 天前
2026年如何自己搭建一个外贸网页?单页验证和完整网站的区别
微信小程序·小程序·开源
小羊Yveesss2 天前
2026年微信小程序搭建一般需要多长时间?不同方案周期和延期点
微信小程序·小程序
小羊Yveesss2 天前
2026年微信小程序搭建算什么费用?年费、设计费、开发费和维护费
微信小程序·小程序
小羊Yveesss3 天前
2026年微信小程序后端怎么搭建?后台、数据、接口和运维怎么选
运维·微信小程序·小程序
小皮虾3 天前
小程序首页性能优化实战:从 4 秒到 1.8 秒
前端·微信小程序
衍生星球5 天前
SpringBoot3 + Vue3 + 微信小程序如何学习,以及学哪些技术,组件
sql·微信小程序·uni-app·vue·springboot
新华财经频道6 天前
2026微信小程序搭建平台实测测评,优缺点解析
微信小程序·小程序
kidding7236 天前
旋转大转盘小程序
前端·css·微信小程序·小程序·前端框架
这是个栗子8 天前
uni-app 微信小程序开发:常用事件指令(@xxx)(一)
微信小程序·小程序·uni-app