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

一、使用场景

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

二、方法

父组件可以通过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})
	}
}
相关推荐
double_eggm13 小时前
微信小程序2
微信小程序·小程序
是江迪呀1 天前
实时看大家都在干嘛?我靠一行监听函数,做了个轻互动小程序
前端·微信小程序
打瞌睡的朱尤1 天前
微信小程序1~25
微信小程序·小程序
拖孩1 天前
我用 AI 搓了一个"比谁更持久"的微信小游戏,AI实现只用了一天,微信审核却用了一个月!!!
微信小程序·ai编程·游戏开发
碎像2 天前
掌握uniapp发布微信小程序、App(Android)
微信小程序·小程序·uni-app
程序媛徐师姐2 天前
Java基于SSM的实验室管理微信小程序,附源码+文档说明
java·微信小程序·实验室管理·实验室管理微信小程序·java实验室管理微信小程序·java实验室管理小程序·实验室管理小程序
自然 醒4 天前
uni-app开发微信小程序,如何使用towxml去渲染md格式和html标签格式的内容?
微信小程序·uni-app·html
竟未曾年少轻狂4 天前
微信小程序-组件开发
微信小程序·小程序
想七想八不如114084 天前
【GitHub开源】一款极简跨平台 Todo 应用:微信小程序 + Windows 桌面挂件 + 实时同步
微信小程序·开源·github
笨笨狗吞噬者4 天前
代理的妙用:uni-app 小程序是怎样用 `Proxy` 和 `wrapper` 抹平平台差异的
前端·微信小程序·uni-app