微信小程序---组件通信---使用selectComponent获取组件实例

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

微信小程序—组件通信—使用selectComponent获取组件实例

子组件component
wxml

<view>{{count}}</view>

js

  properties: {
	count:Number
  },
  methods: {
	addCount(){
  		this.setData({
    		count:this.properties.count+1
  		})
  	this.triggerEvent('sync',{value:this.properties.count})
	}
  }

一.通过父页面增加子组件的数据值

父页面page

wxml

<mytest count="{{count}}" bind:sync="syncCount" class="childC" id="cC"></mytest>
<view>{{count}}</view>
<button bindtap="getChild">获取子组件的实例对象</button>

js

 data: {
	count:1
  },
   syncCount(e){
		this.setData({
  			count:e.detail.value
		})
  },

  getChild(){
    const child = this.selectComponent('.childC')
    child.setData({
      	count:child.properties.count+1
    })
  },

二.通过父页面调用子组件的方法文章来源地址https://www.toymoban.com/news/detail-512756.html

  getChild(){
    const child = this.selectComponent('.childC')
	child.addCount()
  },

到了这里,关于微信小程序---组件通信---使用selectComponent获取组件实例的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • 微信小程序----父子组件之间通信

    1、属性绑定 用于父组件向子组件的指定属性设置数据,仅能设JSON兼容的数据 创建组件  将组件全局共享  对应的父页面进行调用  在子组件的js中定义参数  子组件展示数据  最终效果 2、事件绑定 用于子组件向父组件传递数据,可以传递任意数据 步骤: 1、在父组件的

    2024年02月06日
    浏览(47)
  • 微信小程序-父子组件之间的通信

    父子组件之间通信的3种方式: 属性绑定 用于父组件向子组件的指定属性设置数据,仅能设置JSON兼容的数据 子组件在properties节点中声明对应的属性并使用。代码: 事件绑定 用于子组件向父组件传递数据,可以传递任意数据 事件绑定用于实现子向父传值,可以传递任意类型

    2024年02月03日
    浏览(58)
  • 微信小程序this.triggerEvent()组件通信

    b组件

    2024年02月08日
    浏览(45)
  • 【微信小程序】生命周期,插槽和组件间通信

    1.1 组件全部的生命周期函数 小程序组件可用的全部生命周期如下表所示 生命周期函数 参数 描述说明 created 无 在组件实例刚刚被创建时执行 attached 无 在组件实例进入页面节点树时执行 ready 无 在组件在视图层布局完成后执行 moved 无 在组件实例被移动到节点树另一个位置时

    2024年02月11日
    浏览(51)
  • 【微信小程序】父子组件的创建、通信与事件触发;组件生命周期

    关于微信小程序中父子组件的创建、传值,以及涉及到的组件生命周期。 组件的使用可以 提高开发效率 并 确保功能在各个页面上的应用和修改的一致性 。 例如,对于一些重复的功能,比如顶部导航栏或评论区,将其提炼成组件后,我们只需要在不同的页面中引用该组件,

    2024年02月03日
    浏览(56)
  • 【6 微信小程序学习 - 小程序的组件化开发,通信】

    1,在根目录创建components文件夹,自定义组件都放在此处 2,右键新建component,输入名称后悔创建四个文件 3.其中.json中的\\\"component\\\": true,表示这是一个组件 4,编写代码,和其他代码逻辑相同 1,要使用组件的父组件的json配置文件,usingComponents字段 注册 组件, 组件名称:组件路径 1 外部使用

    2024年02月13日
    浏览(48)
  • 微信小程序父子组件之间通信的 3 种方式

    父子组件之间通信的 3 种方式 ① 属性绑定 ⚫ 用于父组件向子组件的指定属性设置数据,仅能设置 JSON 兼容的数据 ② 事件绑定 ⚫ 用于子组件向父组件传递数据,可以传递任意数据 ③ 获取组件实例 ⚫ 父组件还可以通过 this.selectComponent() 获取子组件实例对象,这样就可以直

    2024年02月09日
    浏览(44)
  • 微信小程序自定义组件boundingClientRect获取到的rect值为null

    const query = wx.createSelectorQuery().in(this) 这一句是最重要的,要用.in(this),this传入的是自定义组件的实例。 不然获取到的rect值为null

    2024年02月13日
    浏览(42)
  • 微信小程序 - 2023 年最新授权获取用户手机号详细教程,完美解决 getPhoneNumber 获取不到 code 的问题(老项目使用手机号快速验证组件,打印授权后没有code字段,拿不到cod)

    由于官方修改了 “获取用户手机号” 规则,导致网上几乎所有教程全部失效,本文来做最新详细教程。 2023年8月往后(官方废弃了原来 “免费” 获取用户手机号的相关方法 API,导致了大量小程序原获取手机号的方式失效报错),本文是最新微信小程序 “收费” 获取用户手

    2024年02月17日
    浏览(95)
  • 微信小程序手机号授权获取收费(手机号快速验证组件)剩余次数查看购买

    登录微信公众平台 ,在管理---》付费管理下查看,已用次数和剩余次数 该能力旨在帮助开发者向用户发起手机号申请,并且 必须经过用户同意后 ,开发者才可获得由平台验证后的手机号,进而为用户提供相应服务。 该能力与手机号实时验证组件的区别为: 手机号快速验证

    2024年02月22日
    浏览(72)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包