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

一、使用场景

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

二、方法

父组件可以通过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})
	}
}
相关推荐
mon_star°3 小时前
基于微信小程序原生框架搭建的转盘小程序1.0(附源码)
微信小程序·小程序·notepad++
Emma_Maria3 小时前
【小程序】插件申请成功,待插件提供方确认通过申请后才能使用
微信小程序
捕捉一只前端小白3 小时前
cpolar内网穿透以及微信小程序域名设置
前端·vue.js·微信小程序·小程序
demo007x17 小时前
如何提高 AI 做小程序的效率?
微信小程序·ai编程·claude
kaolagirl1 天前
微信小程序-滑动拼图安全验证
安全·微信小程序·小程序
2501_933907211 天前
如何选择宁波小程序服务,保障品质与效率?
科技·微信小程序·小程序
Greg_Zhong1 天前
微信小程序中实现气泡提示框、图片css加载动画及容错处理
微信小程序·自定义气泡框·图片css加载动画
奶糖 肥晨2 天前
微信小程序定位功能开发实战:实现自动定位、城市切换与地图导航
微信小程序·小程序
笨笨狗吞噬者2 天前
【uniapp】小程序支持分包引用分包 node_modules 依赖产物打包到分包中
前端·微信小程序·uni-app
用户69371750013842 天前
微信悄悄搞大事!原生智能助手秘密研发,2026年改变亿人使用习惯
android·后端·微信小程序