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

这篇具有很好参考价值的文章主要介绍了【微信小程序】父组件修改子组件数据或调用子组件方法。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、使用场景

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

二、方法

父组件可以通过this.selectComponent方法获取子组件实例对象,这样就可以直接访问组件的任意数据和方法
调用时需要传入一个匹配选择器 selector

(1)父组件

<child class="my-component"></child>
let childObj = this.selectComponent('.my-component')
childObj.setData({currentValue: ''})
childObj.updateData()

父组件将会获取 class 为 my-component 的子组件实例对象,即子组件的 this

(2)子组件文章来源地址https://www.toymoban.com/news/detail-634433.html

<view>当前值为:{{currentValue}}</view>
data() {
  currentValue: ''
},
methods: {
	updateData() {
		this.setData({currentValue: 1})
	}
}

到了这里,关于【微信小程序】父组件修改子组件数据或调用子组件方法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序 - 解决 setData() 无法修改 properties 数据的问题,修改子组件 properties 传递过来的数据(父级页面传入子组件的数据无法更新修改的问题,简洁快速解决方案!)

    当页面(父组件)传递给子组件属性时,需要使用 properties 属性接收,但遗憾的是后续无法对该属性下的数据进行更新数据。 本文实现了微信小程序开发中,解决子组件使用 properties 接收后,无法进行数据的编辑与更新问题, 简单来说,就是组件内部无法通过 setData 对 pro

    2024年02月16日
    浏览(81)
  • 【微信小程序】-- 自定义组件 -- 数据、方法和属性(三十三)

    💌 所属专栏:【微信小程序开发教程】 😀 作  者:我是夜阑的狗🐶 🚀 个人简介:一个正在努力学技术的CV工程师,专注基础和实战分享 ,欢迎咨询! 💖 欢迎大家:这里是CSDN,我总结知识的地方,喜欢的话请三连,有问题请私信 😘 😘 😘   大家好,又见面了,

    2024年02月09日
    浏览(42)
  • 微信小程序:uni-app列表数据渲染子组件修改数据sync/v-model无效的问题

    有如下一个列表,将数据循环传递给子组件,实现业务解耦,组件拆分 Vue的正常逻辑是,父组件和子组件的数据传递的是一个对象,属于引用传递,可以直接在子组件中修改数据,父组件中也会变化,它们操作的是同一个数据。 uni-app子组件中修改 H5正常,转为微信小程序后

    2024年02月10日
    浏览(61)
  • 微信小程序修改vant组件样式

    1 背景 在使用vant组件开发微信小程序的时候,想更改vant组件内部样式,达到自己想要的目的(van-grid组件改成宫格背景色为透明,默认为白色),官网没有示例,通过以下几步修改成功。 2 步骤 2.1 查看官方文档 Grid 外部样式类 支持修改Grid组件样式,我们在组件上添加该属

    2024年02月09日
    浏览(75)
  • 微信小程序 父组件调用子组件事件和传递参数

    一、使用场景 当每个页面都调用统一的组件时,传递的参数和方法都不尽相同,我们应该怎么样子传递给我们的子组件,让子组件获取相应的值或方法进行计算执行。 二、实现方式 1、父组件调用子组件的方法 2、父组件传递参数给子组件

    2024年02月11日
    浏览(71)
  • 微信小程序手机号快速验证组件调用方式

    目录 一、测试环境 二、问题现象 三、总结 手机号验证组件(包括快速验证组件和实时验证组件)调用后无法对事件进行回调这个问题,先说结论,以下是正确的使用方式: 一、测试环境 windows10 微信开发者工具(1.06.2307260win32-x64) 基础库(3.0.1[1028]) iPhone XR(IOS 15.2.1) 微信(

    2024年02月10日
    浏览(64)
  • 微信小程序原生button组件使用并修改样式

     想使用原生button组件,但是想使用不同样式 注意type使用得type必须和修改时选择器样式(button[type=default])一样,才能对其修改样式,否则样式不会被修改 如果是多端适配,需要使用type为default再修改样式  

    2024年02月14日
    浏览(58)
  • 微信小程序switch开关组件修改样式(大小,颜色)

    以上尺寸根据你的具体情况来调整

    2024年02月11日
    浏览(60)
  • 微信小程序 修改三方组件中的自带样式

    众所周知,微信小程序会引用诸如vant,weiui等三方组件,当我们想要对组件自带样式进行修改的时候该怎么做呢? 1.在调试器中找到想要修改样式的组件的class类名,在对应的wxss中添加样式,此时样式未生效; 2.官方文档中提到可以在externalclass中添加一个类名暴露给父组件,

    2024年02月12日
    浏览(54)
  • 微信小程序怎么修改自定义组件中的样式

    在微信小程序中我们经常要用到自定义组件,但是有时我们因为引用的地方不同可能组件的一些样式也要修改,比如颜色,高度,宽度等来适合不同的页面,有没有办法来修改自定义组件中的样式呢,很显然是有的,我们要用到externalClasses方法。 一.自定义子组件: component

    2024年02月12日
    浏览(68)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包