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

一、使用场景

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

二、方法

父组件可以通过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})
	}
}
相关推荐
kidding7236 小时前
高效备忘清单工具类小程序
前端·计算机网络·微信小程序·小程序
前端 贾公子8 小时前
小程序蓝牙打印探索与实践 (最终章)
前端·微信小程序·小程序
小羊Yveesss10 小时前
2026年个人能做微信小程序吗?
微信小程序·小程序
kidding72310 小时前
BMI 健康测量仪工具类小程序
前端·微信小程序·小程序
这是个栗子1 天前
微信小程序开发(九)- uni-app微信小程序商城
微信小程序·小程序·uni-app·vue·vuex
一只皮卡皮卡丘1 天前
微信小程序tab页苹果显示安卓不显示的问题
微信小程序·小程序
拙慕JULY2 天前
微信小程序自定义标题背景色
微信小程序·小程序
克里斯蒂亚诺更新3 天前
微信小程序使用vant4 weapp自定义菜单 但是弹出层却被菜单遮挡的解决办法
微信小程序·小程序·notepad++
静Yu3 天前
从一个九宫格素材小程序,看轻量工具产品该如何优化体验
前端·微信小程序
小羊Yveesss3 天前
2026年微信小程序制作工具怎么选?
微信小程序·小程序