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

一、使用场景

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

二、方法

父组件可以通过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})
	}
}
相关推荐
Lsx_3 小时前
H5 嵌入微信 / 支付宝 / 抖音小程序 WebView:调用原生能力完整方案
前端·微信小程序·webview
计算机学姐17 小时前
基于微信小程序的图书馆座位预约系统【uniapp+springboot+vue】
vue.js·spring boot·微信小程序·小程序·java-ee·uni-app·intellij-idea
WKK_1 天前
uniapp 微信小程序使用TextEncoder,arrayBufferToBase64
微信小程序·小程序·uni-app
舟遥遥娓飘飘1 天前
面向零基础初学者,从环境搭建到发布上线,手把手教你开发第一个微信小程序(第3章-认识项目结构)
微信小程序·小程序·notepad++
优睿远行1 天前
微信小程序自定义组件开发实战:从封装到发布的全流程指南
微信小程序·小程序·notepad++
Greg_Zhong1 天前
微信小程序中使用云函数调用豆包免费模型,部署云函数设置(触发器)执行每日自动生成书籍的文章赏析,完整过程
微信小程序·ai工程师·小程序中豆包模型调用·云函数配置触发器生成每日文章·微信云函数
eric*16881 天前
微信小程序全局安全水印组件实践:支持动态更新、全局生效、自定义样式
微信小程序·小程序
杰建云1672 天前
微信小程序自制全流程实测与避坑指南
微信小程序·小程序
kyh10033811202 天前
微信小程序 聚合摇骰喝酒工具 完整实现(含源码)
微信小程序·小程序·摇骰子小游戏
Greg_Zhong2 天前
微信小程序中实现自定义圆形进度条
微信小程序·自定义圆形进度条