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

一、使用场景

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

二、方法

父组件可以通过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})
	}
}
相关推荐
百锦再2 小时前
万字解析:抖音小程序与微信小程序开发全景对比与战略选择
人工智能·ai·语言模型·微信小程序·小程序·模拟·模型
游九尘2 小时前
微信小程序根据设计稿适配
微信小程序
qq_12498707534 小时前
基于微信小程序的奶茶店点餐平台的设计与实现(源码+论文+部署+安装)
spring boot·微信小程序·小程序·毕业设计·毕设·计算机毕业设计
计算机毕设指导61 天前
基于微信小程序图像识别的智能垃圾分类系统【源码文末联系】
java·spring boot·mysql·微信小程序·小程序·分类·maven
qq_12498707531 天前
基于微信小程序的科技助农系统的设计与实现(源码+论文+部署+安装)
java·大数据·spring boot·后端·科技·微信小程序·毕业设计
lsyhaoshuai1 天前
微信小程序开发实战:打造一款功能完善的随机决策工具--小转盘-拯救困难选择症
微信小程序·小程序·notepad++
项目題供诗1 天前
微信小程序黑马优购(项目)(十)
微信小程序·小程序
计算机毕设指导61 天前
基于Django的本地健康宝微信小程序系统【源码文末联系】
java·后端·python·mysql·微信小程序·小程序·django
qq_12498707532 天前
基于微信小程序的校园跑腿系统的设计与实现(源码+论文+部署+安装)
spring boot·微信小程序·小程序·毕业设计·计算机毕业设计
大大花猫2 天前
我用AI写了个小程序,却被人说没有底线…
前端·微信小程序·交互设计