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

一、使用场景

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

二、方法

父组件可以通过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})
	}
}
相关推荐
云起SAAS1 天前
B2B 木材行业供需对接平台微信小程序开源
微信小程序·小程序·ai编程·看广告变现轻·b2b 木材行业供需对接平台
程序媛徐师姐2 天前
Java基于微信小程序的球馆预约系统,附源码+文档说明
java·微信小程序·球馆预约系统小程序·jav球馆预约系统小程序·java球馆预约微信小程序·球馆预约微信小程序·java球馆预约系统
毕设源码-邱学长2 天前
【开题答辩全过程】以 基于微信小程序地方小吃分享平台设计与实现为例,包含答辩的问题和答案
微信小程序·小程序
不懂代码的切图仔2 天前
小程序web-view嵌入h5扫码 jssdk方式
前端·微信小程序
BugShare2 天前
小程序构建npm时报错应该如何解决
微信小程序·npm
大尚来也2 天前
自助建站系统有哪些?自助建站平台深度对比
微信小程序
码云数智-园园2 天前
2026建网站一般需要多少钱?
微信小程序
嫂子开门我是_我哥2 天前
从零开发微信小程序+若依后端项目:本地全流程开发,从环境搭建到前后端联调跑通
微信小程序·小程序·若依
云起SAAS4 天前
设备质保保修维修保质包换期查询H5抖音快手微信小程序看广告流量主开源
微信小程序·小程序
程序媛徐师姐4 天前
Java基于微信小程序的线上教育商城,附源码+文档说明
java·微信小程序·线上教育商城小程序·java线上教育商城小程序·线上教育商城微信小程序·线上教育小程序·线上教育微信小程序