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

一、使用场景

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

二、方法

父组件可以通过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})
	}
}
相关推荐
bug总结14 小时前
uniapp 微信小程序分包规范
微信小程序·小程序·uni-app
凉红茶1 天前
用Cursor开发微信小程序的第一天
微信小程序·小程序·ai编程
小马过河R1 天前
微信小程序自定义登录态维护:从入门到生产级落地
后端·微信小程序·小程序·架构·登录态
andrsted1 天前
用练题簿小程序 - 让错题不再白错
学习·微信小程序·小程序·学习方法
wxwx_bscxy3221 天前
基于Python新冠疫情可视化分析系统的设计与实现
java·数据库·spring boot·python·微信小程序·sqlite
数字游民95273 天前
史诗级更新:微信小程序支持个人主体接入虚拟支付
ai·微信小程序·小程序·opc·数字游民9527
汤姆yu3 天前
基于微信小程序的晚托机构管理系统
微信小程序·小程序·晚托
凡泰AI3 天前
如何通过小程序多端框架,让一个小程序同时运行在iOS、安卓、鸿蒙和微信客户端,实现开发层面的降本增效
android·ios·微信小程序·小程序·harmonyos
andrsted4 天前
在线刷小程序推荐
学习·微信小程序·小程序·学习方法
Mark108594 天前
【踩坑】Uni-app微信小程序自定义组件在 Flex 布局中未铺满整行
微信小程序·小程序·uni-app