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

一、使用场景

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

二、方法

父组件可以通过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})
	}
}
相关推荐
wapchief2 小时前
微信小程序camera相机帧转图片base64
微信小程序·小程序
QuantumLeap丶2 小时前
《uni-app跨平台开发完全指南》- 05 - 基础组件使用
vue.js·微信小程序·uni-app
泽_浪里白条4 小时前
UniApp + Vue3 开发微信小程序数字人:TTS PCM 音频流与 SVGA 动画同步实战
微信小程序
小蒜学长4 小时前
springboot基于Java的校园导航微信小程序的设计与实现(代码+数据库+LW)
java·spring boot·后端·微信小程序
WenGyyyL6 小时前
微信小程序开发——第二章:微信小程序开发环境搭建
开发语言·python·微信小程序
TiAmo zhang6 小时前
微信小程序开发案例 | 个人相册小程序(上)
微信小程序·小程序
WenGyyyL1 天前
微信小程序开发——第三章:WXML 与 WXSS —— 小程序页面结构与样式设计
微信小程序·小程序
WenGyyyL1 天前
微信小程序开发——第四章:小程序的组件与模块化开发
微信小程序·小程序·notepad++
文人sec1 天前
微信小程序minium自动化测试SOP
微信小程序·小程序
克里斯蒂亚诺更新1 天前
微信小程序 点击地图后弹出一个模态框
微信小程序·小程序·notepad++