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

一、使用场景

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

二、方法

父组件可以通过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})
	}
}
相关推荐
恩创软件开发14 小时前
创业日常2026-1-8
java·经验分享·微信小程序·小程序
腾讯云云开发1 天前
微信发布AI小程序成长计划:免费云开发资源+1亿token额度!
微信小程序·ai编程·小程序·云开发
FinClip2 天前
微信AI小程序“亿元计划”来了!你的APP如何一键接入,抢先变现?
前端·微信小程序·app
计算机毕设指导62 天前
基于微信小程序的考研资源共享系统【源码文末联系】
java·spring boot·后端·考研·微信小程序·小程序·maven
沉默-_-2 天前
从小程序前端到Spring后端:新手上路必须理清的核心概念图
java·前端·后端·spring·微信小程序
week_泽2 天前
百战商城商品数据云函数化改造总结_百战_3
数据库·笔记·微信小程序·小程序
『 时光荏苒 』2 天前
微信小程序we分析如何采集webview的体验信息
微信小程序·小程序·webview·we分析
百锦再2 天前
Vue大屏开发全流程及技术细节详解
前端·javascript·vue.js·微信小程序·小程序·架构·ecmascript
项目題供诗2 天前
微信小程序黑马优购(项目)(十五)
微信小程序·小程序
云起SAAS2 天前
婚礼邀请函请柬请帖制作生成抖音快手微信小程序看广告流量主开源
微信小程序·小程序·ai编程·看广告变现轻·婚礼邀请函