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

一、使用场景

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

二、方法

父组件可以通过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})
	}
}
相关推荐
xkxnq14 小时前
微信小程序地理定位功能
微信小程序·小程序
難釋懷14 小时前
微信小程序全局数据共享
微信小程序·小程序
郭邯15 小时前
小程序自定义组件学习笔记
微信小程序
xmdoor21 小时前
微信小程序:酒店预订管理系统
微信小程序·酒店预订·酒店系统·酒店管理
The_era_achievs_hero2 天前
微信小程序141~150
微信小程序·小程序·notepad++
熊猫片沃子2 天前
小程序间跳转与传值实现方案
前端·微信小程序
normi-D182 天前
微信小程序未登录状态下的导航拦截有哪些方法可以实现
微信小程序·小程序
wocwin2 天前
uniapp微信小程序vue3封装时间段范围选择组件
vue.js·微信小程序
晓风伴月2 天前
微信小程序:在ios中border边框显示不全
ios·微信小程序·小程序
新酱爱学习2 天前
前端海报生成的几种方式:从 Canvas 到 Skyline
前端·javascript·微信小程序