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

一、使用场景

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

二、方法

父组件可以通过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})
	}
}
相关推荐
黑马源码库miui520861 天前
JAVA成人用品商城系统源码微信小程序+h5+安卓+ios
android·java·微信小程序
计算机毕设指导61 天前
基于微信小程序的篮球场馆预订系统【源码文末联系】
java·spring boot·mysql·微信小程序·小程序·tomcat·maven
DsirNg2 天前
页面栈溢出问题修复总结
前端·微信小程序
小徐_23332 天前
uni-app 也能远程调试?使用 PageSpy 打开调试的新大门!
前端·微信小程序·uni-app
深红2 天前
玩转小程序AR-实战篇
前端·微信小程序·webvr
我命由我123452 天前
微信小程序 - scroll-view 的一些要点(scroll-view 需要设置滚动方向、scroll-view 需要设置高度)
开发语言·前端·javascript·微信小程序·小程序·前端框架·js
weixin_472183542 天前
微信小程序使用websocket
websocket·微信小程序·小程序
菜鸟学Python2 天前
零基础用AI编程开发微信小程序-开始篇
微信小程序·小程序·ai编程
烟囱土著2 天前
捣鼓30天,我写了一个数学加减练习小程序
学习·算法·微信小程序·小程序
qq_12498707533 天前
基于微信小程序的线下点餐系统的设计与实现(源码+论文+部署+安装)
spring boot·微信小程序·小程序·毕业设计