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

一、使用场景

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

二、方法

父组件可以通过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})
	}
}
相关推荐
2601_949804924 小时前
开源多商户商城源码最新版_适配微信小程序+H5+APP+PC多端
微信小程序·小程序
码云数智-大飞4 小时前
2026主流自助建站平台对比评测
微信小程序
2501_933907217 小时前
上海本凡科技的微信小程序公司主要提供哪些服务?
科技·微信小程序·小程序
2601_949804928 小时前
【全开源】西陆家政系统源码小程序(FastAdmin+ThinkPHP+原生微信小程序)
微信小程序·小程序
计算机毕设指导61 天前
基于微信小程序的智能停车场管理系统【源码文末联系】
java·spring boot·微信小程序·小程序·tomcat·maven·intellij-idea
2501_933907211 天前
如何选择西安优质小程序开发服务与本凡码农合作?
科技·微信小程序·小程序
咖啡の猫2 天前
微信小程序案例 - 自定义 tabBar
微信小程序·小程序·notepad++
咖啡の猫2 天前
微信小程序全局数据共享
微信小程序·小程序
桐溪漂流2 天前
微信小程序cli脚本预览上传
微信小程序·小程序
咖啡の猫2 天前
微信小程序使用 npm 包
微信小程序·小程序·npm