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

一、使用场景

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

二、方法

父组件可以通过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})
	}
}
相关推荐
花卷HJ7 小时前
微信小程序国际化完整方案
微信小程序·小程序·notepad++
nhc0888 小时前
贵阳纳海川科技・上门洗车行业解决方案
科技·微信小程序·软件开发·小程序开发
hashiqimiya9 小时前
微信小程序--动态切换登录注册标签页
微信小程序·小程序
hashiqimiya9 小时前
微信小程序--获取验证码设计倒计时灰白色
微信小程序·小程序
2501_9339072113 小时前
宁波小程序公司提供专业的小程序开发服务
科技·微信小程序·小程序
扶苏100214 小时前
记一次 uni-app开发微信小程序 textarea 的“伪遮挡”踩坑实录
微信小程序·小程序·uni-app
哈罗哈皮1 天前
trea也很强,我撸一个给你看(附教程)
前端·人工智能·微信小程序
毕设源码-赖学姐1 天前
【开题答辩全过程】以 居家养老服务微信小程序设计与实现为例,包含答辩的问题和答案
微信小程序·小程序
Emma_Maria2 天前
【小程序】插件开发总结
微信小程序
2501_933907212 天前
如何选择宁波小程序公司,实现高效的小程序开发?
科技·微信小程序·小程序