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

一、使用场景

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

二、方法

父组件可以通过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})
	}
}
相关推荐
美美的海顿4 小时前
springboot基于Java的校园导航微信小程序的设计与实现
java·数据库·spring boot·后端·spring·微信小程序·毕业设计
罗狮粉 998 小时前
docker部署微信小程序自动构建发布和更新
docker·微信小程序·notepad++
Kika写代码21 小时前
【微信小程序】页面跳转基础 | 我的咖啡店-综合实训
服务器·微信小程序·小程序
源码哥_博纳软云1 天前
JAVA同城服务场馆门店预约系统支持H5小程序APP源码
java·开发语言·微信小程序·小程序·微信公众平台
YUJIAN。1 天前
使用uniapp开发微信小程序-框架搭建
微信小程序·小程序·uni-app
V+zmm101341 天前
基于微信小程序的乡村政务服务系统springboot+论文源码调试讲解
java·微信小程序·小程序·毕业设计·ssm
还这么多错误?!1 天前
uniapp微信小程序,使用fastadmin完成一个一键获取微信手机号的功能
微信小程序·小程序·uni-app
_院长大人_1 天前
微信小程序用户信息解密 AES/CBC/NoPadding 解密失败问题
微信小程序·小程序
407指导员1 天前
uniapp 微信小程序 页面部分截图实现
微信小程序·小程序·uni-app
三木吧2 天前
开发微信小程序的过程与心得
人工智能·微信小程序·小程序