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

一、使用场景

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

二、方法

父组件可以通过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})
	}
}
相关推荐
树下水月28 分钟前
微信小程序接口,必须使用https的443端口吗?
微信小程序·小程序·https
2501_933907211 天前
南京本凡科技,怎么选择专业小程序开发才能提升品牌竞争力?
科技·微信小程序·小程序
心无旁骛~1 天前
【Claude Code开发】AI记账助手(miaozhang)微信小程序开发与部署完整指南
人工智能·微信小程序·notepad++
2501_933907211 天前
本凡科技提供的宁波小程序开发服务全面解决方案
科技·微信小程序·小程序
阿珊和她的猫1 天前
微信小程序静默授权异步问题的处理方案
微信小程序·状态模式·notepad++
左师佑图1 天前
微信小程序集成 Day.js 插件的完整解决方案
微信小程序·小程序
2501_933907211 天前
本凡科技提供宁波小程序服务与定制解决方案
科技·微信小程序·小程序
2501_933907211 天前
宁波小程序开发服务与技术团队专业支持
科技·微信小程序·小程序
sheji34162 天前
【开题答辩全过程】以 基于微信小程序的少儿编程学习平台为例,包含答辩的问题和答案
学习·微信小程序·小程序
const_qiu2 天前
微信小程序自动化测试100%通过率实践
微信小程序·小程序