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

一、使用场景

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

二、方法

父组件可以通过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})
	}
}
相关推荐
woshinon15 小时前
【Uniapp(HBuilderX)针对微信小程序和H5平台实现差异化配置(自定义发行)】
微信小程序·小程序·uni-app
hashiqimiya15 小时前
微信小程序---textarea组件布局
微信小程序·小程序
笨笨狗吞噬者1 天前
uni-app 编译小程序原生组件时疑似丢属性,可以给官方提 PR 了
前端·微信小程序·uni-app
摇滚侠2 天前
JAVA 项目教程《苍穹外卖-11》,微信小程序项目,前后端分离,从开发到部署
java·开发语言·微信小程序
AnalogElectronic2 天前
uniapp学习9,同时兼容h5和微信小程序的百度地图组件
学习·微信小程序·uni-app
AnalogElectronic2 天前
uniapp学习5,兼容微信小程序的俄罗斯方块游戏
学习·微信小程序·uni-app
克里斯蒂亚诺更新3 天前
微信小程序调用腾讯地图路线规划-注意点
微信小程序·小程序
摇滚侠3 天前
JAVA 项目教程《苍穹外卖-10》,微信小程序项目,前后端分离,从开发到部署
java·开发语言·微信小程序
码云社区3 天前
JAVA二手车交易二手车市场系统源码支持微信小程序+微信公众号+H5+APP
java·开发语言·微信小程序·二手交易·闲置回收
爬坑的小白4 天前
微信小程序拉起支付
微信小程序·小程序