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

一、使用场景

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

二、方法

父组件可以通过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})
	}
}
相关推荐
h_654321012 小时前
微信小程序点击按钮跳转链接并显示
微信小程序·小程序
银迢迢15 小时前
微信小程序的开发及问题解决
微信小程序·小程序
liyinchi198815 小时前
原生微信小程序 textarea组件placeholder无法换行的问题解决办法
微信小程序·小程序
前端极客探险家1 天前
微信小程序全解析:从入门到实战
微信小程序·小程序
h_65432101 天前
微信小程序van-dialog确认验证失败时阻止对话框的关闭
微信小程序·小程序
-曾牛1 天前
基于微信小程序的在线聊天功能实现:WebSocket通信实战
前端·后端·websocket·网络协议·微信小程序·小程序·notepad++
CN自由之翼2 天前
【微信小程序】webp资源上传失败
微信小程序·小程序
小新1102 天前
微信小程序学习之搜索框
学习·微信小程序·小程序
小新1102 天前
微信小程序之将轮播图设计为组件
微信小程序·小程序
不爱吃饭爱吃菜2 天前
uniapp微信小程序-长按按钮百度语音识别回显文字
前端·javascript·vue.js·百度·微信小程序·uni-app·语音识别