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

一、使用场景

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

二、方法

父组件可以通过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})
	}
}
相关推荐
滑稽的3 分钟前
微信小程序过滤功能实现
微信小程序·小程序
漏刻有时25 分钟前
微信小程序学习实录15:微信小程序基于百度云人脸识别的刷脸打卡开发方案
学习·微信小程序·百度云
莫桐2 小时前
微信小程序-ios环境下webview打开的h5页面replace跳转方式不生效问题
ios·微信小程序·小程序
毕设源码-钟学长3 小时前
【开题答辩全过程】以 基于微信小程序的考公论坛的设计与实现为例,包含答辩的问题和答案
微信小程序·小程序
帅次4 小时前
系统分析师-移动应用系统分析与设计
android·ios·微信小程序·小程序·android studio·webview
沉默-_-19 小时前
微信小程序网络请求 wx.request 详解
网络·学习·微信小程序·小程序
沉默-_-21 小时前
微信小程序页面配置详解
学习·微信小程序·apache·微信开发者工具
逆龙泰氽1 天前
微信小程序开发04-1(小程序API)
微信小程序·小程序
苏苏哇哈哈1 天前
微信小程序实现高性能动态配置水滴凹槽、凸起Tabbar 组件
微信小程序·小程序
逆龙泰氽1 天前
微信小程序开发03(WXML语法)
微信小程序·小程序