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

一、使用场景

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

二、方法

父组件可以通过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})
	}
}
相关推荐
小雨cc5566ru1 小时前
uniapp+Android面向网络学习的时间管理工具软件 微信小程序
android·微信小程序·uni-app
小雨cc5566ru10 小时前
hbuilderx+uniapp+Android健身房管理系统 微信小程序z488g
android·微信小程序·uni-app
小雨cc5566ru11 小时前
微信小程序hbuilderx+uniapp+Android 新农村综合风貌旅游展示平台
android·微信小程序·uni-app
Stanford_110616 小时前
C++入门基础知识99——【关于C++ 成员运算符】
开发语言·c++·微信小程序·twitter·微信开放平台
正小安1 天前
MobX-Miniprogram:微信小程序的状态管理利器
微信小程序·小程序
GDAL1 天前
软考鸭微信小程序:助力软考备考的便捷工具
微信小程序·小程序
2401_844137951 天前
JAVA智慧社区系统跑腿家政本地生活商城系统小程序源码
微信·微信小程序·小程序·生活·微信公众平台·微信开放平台
45°仰望星空1 天前
ASP.Net Core 获取微信小程序 OpenId 验证
后端·微信小程序·asp.net
等你许久_孟然1 天前
【小程序】小tips:微信小程序登录后返回登录前的页面继续操作(保留参数)
微信小程序·小程序
正小安1 天前
用户登录与信息管理:实现小程序登录与用户信息存储
前端·微信小程序·小程序