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

一、使用场景

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

二、方法

父组件可以通过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})
	}
}
相关推荐
雯0609~12 小时前
微信小程序的原生开发项目如何转至uni-app
微信小程序·小程序·uni-app
好赞科技1 天前
2026年最佳健身小程序推荐榜单,帮你解锁智能运动新体验
大数据·微信小程序
好赞科技1 天前
026年五大汽车保养预约小程序推荐榜单,让养车更轻松省心
大数据·微信小程序
azhou的代码园1 天前
基于微信小程序的图片识别科普系统的设计与实现
vue.js·spring boot·微信小程序·小程序·毕业设计·科普·图片识别
好赞科技2 天前
深度测评2026年最佳GEO流量精准获客工具排行榜,解锁你的营销新高度
大数据·微信小程序
深邃的眼2 天前
微信小程序从 0-1:从本地开发到部署服务器上线整体流程保姆式教学
阿里云·微信小程序·个人开发
喜欢南方姑娘2 天前
微信小程序热更新-用户打开小程序时检测版本自动更新
微信小程序·小程序·notepad++
一叶星殇2 天前
高颜值微信小程序 UI 组件库大盘点,助你轻松开发!
微信小程序·小程序
计算机专业码农一枚2 天前
微信小程序 uniapp+vue高校社团管理
vue.js·微信小程序·uni-app
Raytheon_code2 天前
从零到一:我用微信小程序做了一款串珠DIY定制工具
css·微信小程序·html5·ai编程