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

一、使用场景

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

二、方法

父组件可以通过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})
	}
}
相关推荐
Evavava啊4 小时前
iOS微信小程序WebView中按钮背景渐变显示问题解决方案
ios·微信小程序·h5·渲染
阳光雨滴4 小时前
微信小程序使用canvas自定义富文本内容做图片分享
微信小程序·小程序
这是个栗子4 小时前
【微信小程序问题解决】微信小程序全局 navigationBarTitleText 不起作用
微信小程序·小程序·导航栏
lpfasd1235 小时前
从“惯性思维”到“规则驱动”:一次微信小程序修复引发的 AI 编程范式思考
人工智能·微信小程序·小程序
Evavava啊5 小时前
微信小程序H5页面iOS视频播放问题解决方案
ios·微信小程序·音视频·h5·http 响应头
星空下的曙光6 小时前
uniapp编译到微信小程序接口获取不到数据uni.request
微信小程序·小程序·uni-app
Greg_Zhong1 天前
微信小程序中便捷实现自定义底部tab栏
微信小程序·自定义底部tab
LXXgalaxy1 天前
微信小程序“记住密码”功能的实现与落地 vue3+ts的细致解析
微信小程序·小程序·notepad++
Greg_Zhong1 天前
微信小程序中使用【免费商用】字体的下载和初步认识和使用
微信小程序·阿里巴巴、站酷·腾讯云对象存储(cos)
克里斯蒂亚诺更新1 天前
微信小程序 腾讯地图 点聚合 简单示例
微信小程序·小程序·notepad++