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

一、使用场景

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

二、方法

父组件可以通过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})
	}
}
相关推荐
Dignity_呱17 小时前
如何在不发版时,实现小程序的 AB 测试?
前端·面试·微信小程序
咸虾米_2 天前
微信小程序通过uni.chooseLocation打开地图选择位置,相关设置及可能出现的问题
微信小程序·小程序·uniapp开发·小程序地图api
不如摸鱼去3 天前
Trae 辅助下的 uni-app 跨端小程序工程化开发实践分享
微信小程序·小程序·uni-app·aigc·ai编程
意会3 天前
微信闪照小程序实现
前端·css·微信小程序
小白_ysf3 天前
uniapp 开发微信小程序,获取经纬度并且转化详细地址(单独封装版本)
微信小程序·uni-app
是一碗螺丝粉4 天前
拯救你的app/小程序审核!一套完美避开审核封禁的URL黑名单机制
前端·javascript·微信小程序
我叫黑大帅4 天前
微信小程序分包:告别加载慢,像拆快递一样简单!
前端·微信小程序
两个月菜鸟4 天前
vue+微信小程序 五角星
前端·vue.js·微信小程序
熬耶5 天前
Uniapp之微信小程序自定义底部导航栏形态
微信小程序·小程序·uni-app
誰在花里胡哨6 天前
微信小程序实现陀螺仪卡片景深效果
前端·微信小程序·动效