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

一、使用场景

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

二、方法

父组件可以通过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})
	}
}
相关推荐
计算机毕设定制辅导-无忧学长4 小时前
基于微信小程序的高校订餐小程序
微信小程序·小程序
從南走到北9 小时前
JAVA国际版同城跑腿源码快递代取帮买帮送同城服务源码支持Android+IOS+H5
android·java·ios·微信小程序
大熋10 小时前
微信小程序实现下载 上传表格(xls、xlsx)
微信小程序·小程序
千寻技术帮10 小时前
50030_基于微信小程序的生鲜配送系统
mysql·微信小程序·源码·安装·文档·ppt·答疑
羊吖17 小时前
微信小程序图片上传系统性能优化实践
微信小程序·小程序
云起SAAS1 天前
早晚安打卡抖音快手微信小程序看广告流量主开源
微信小程序·小程序·ai编程·看广告变现轻·早晚安打卡
gongzemin1 天前
约课小程序增加候补功能
前端·微信小程序·小程序·云开发
Never_Satisfied1 天前
在JavaScript / 微信小程序中,动态修改页面元素的方法
开发语言·javascript·微信小程序
Coder-coco1 天前
个人健康系统|健康管理|基于java+Android+微信小程序的个人健康系统设计与实现(源码+数据库+文档)
android·java·vue.js·spring boot·微信小程序·论文·个人健康系统
老华带你飞1 天前
个人健康系统|健康管理|基于java+Android+微信小程序的个人健康系统设计与实现(源码+数据库+文档)
android·java·vue.js·微信小程序·论文·毕设·个人健康系统