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

一、使用场景

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

二、方法

父组件可以通过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})
	}
}
相关推荐
StevenLdh1 天前
第四期 · 云端同步与冲突仲裁:离线可写、多端一致的工程解法
java·微信小程序
m0_462803881 天前
会议签到如何设置手写签名?从创建签到到导出签名 PDF 的完整流程
微信小程序
AI工具人PM产品经理2 天前
零基础微信小程序入门:一个真实项目的里程碑路线图
微信小程序·云开发·学习路线·零基础入门·ai 编程
拖孩3 天前
这个小程序是 AI 帮我写的,可它里面一个 AI 功能都没有
前端·后端·微信小程序
克里斯蒂亚诺更新3 天前
小程序自定义导航栏怎么写:从配置到实战
微信小程序
liyinchi19883 天前
微信小程序支付遇到“由于小程序违规,支付功能暂时无法使用” 解决办法
java·微信小程序·go
silianpan3 天前
Office 文档预览 UTS 插件
android·微信小程序·harmonyos
微笑的曙光3 天前
第三期 · 账号体系与双 Token 鉴权:让用户「无感登录,有感安全」
微信小程序
耀耀切克闹灬4 天前
Skyline 渲染问题记录以及总结
微信小程序
小程序开发X4 天前
2026 深圳 APP 开发甄选:技术架构搭建、全流程落地、综合选型解读
微信小程序·小程序·app开发