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

一、使用场景

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

二、方法

父组件可以通过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})
	}
}
相关推荐
小皮虾1 小时前
告别服务器!小程序纯前端“图片转 PDF”工具,隐私安全又高效
前端·javascript·微信小程序
源码_V_saaskw2 天前
JAVA国际版同城跑腿源码快递代取帮买帮送同城服务源码支持Android+IOS+H5
android·java·ios·微信小程序
tbit2 天前
fluwx 拉起小程序WXLog:Error:fail to load Keychain status:-25300, keyData null:1
flutter·ios·微信小程序
book多得2 天前
刷题专用微信小程序推荐
微信小程序·小程序
技术与健康2 天前
微信小程序云开发实践:共享环境与LLM整合经验
微信小程序·小程序
项目題供诗3 天前
微信小程序黑马优购(项目)(一)
微信小程序·小程序
项目題供诗3 天前
微信小程序黑马优购(项目)(三)
微信小程序·小程序
H_ZMY3 天前
微信小程序 mp-html:专为小程序设计的富文本渲染组件
微信小程序·小程序·html
千寻技术帮4 天前
50043_基于微信小程序的小区物业管理系统
mysql·微信小程序·源码·文档·ppt
项目題供诗5 天前
微信小程序黑马优购(项目)(二)
微信小程序·小程序