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

一、使用场景

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

二、方法

父组件可以通过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})
	}
}
相关推荐
vx_bscxy3223 小时前
告别毕设焦虑!Python 爬虫 + Java 系统 + 数据大屏,含详细开发文档 基于微信小程序的民宿预约系统22398 (上万套实战教程,赠送源码)
java·spring boot·mysql·微信小程序·课程设计
千寻技术帮7 小时前
50015_基于微信小程序的红色旅游系统
微信小程序·小程序·源码·ppt·项目文档
sg_knight7 小时前
微信小程序中 WebView 组件的使用与应用场景
前端·javascript·微信·微信小程序·小程序·web·weapp
我很苦涩的18 小时前
使用微信小程序实现多格验证码效果
微信小程序·小程序
阿里花盘18 小时前
花店微信小程序怎么做,创建一个小程序需要多少钱
微信小程序·小程序
2501_933509071 天前
无锡制造企税惠防错指南:知了问账帮守政策红利线
大数据·人工智能·微信小程序
汤姆yu1 天前
基于微信小程序的智慧社区娱乐服务管理平台
微信小程序·娱乐
千寻技术帮1 天前
50013_基于微信小程序的校园志愿者系统
mysql·微信小程序·springboot·文档·ppt
汤姆yu1 天前
基于微信小程序的民宿预定系统
微信小程序·小程序·民宿预定
黑夜世界2 天前
微信小程序map组件聚合簇样式自定义
微信小程序·小程序