微信小程序 selectComponent 获取组件为 null

最新推荐文章于 2025-01-27 23:50:42 发布
原创 最新推荐文章于 2025-01-27 23:50:42 发布 · 2.7k 阅读 · 0 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#小程序 #javascript
本文探讨了在特定条件下使用this.selectComponent获取组件出现null的情况，并深入分析其原因在于组件显示受wx:if控制。通过实例分享了解决方案及注意事项。

最近在做一个需求时偶尔发现一个 bug ，排查很久后发现是因为调用 this.selectComponent 时没有获取到组件的问题。

分析
  • 没有在父组件渲染时的生命周期中调用，所以不会是页面和组件的渲染流先后问题
  • 在其地方调用时能获取到，所以不会是组件的问题
  • 只有在某些时间点调用才会是 null ，分析那些时间点所做的操作
原因
  • 在那个时间点里改变的一个值的判断，而组件使用 wx:if 来判断是否显示组件，而当不显示组件时，调用 this.selectComponent 为 null
总结
  • 当使用 this.selectComponent 获取组件前，应该检查组件是否有使用 wx:if ，如果有使用的话应该考虑是否存在上面的问题，然后再单独处理。
其他可能原因
微信小程序 - wx:for 循环渲染多个 “重复“ 子组件（仅子组件 id 不同，this.selectComponent 使用时依然能准确找到子组件）将子组件 id 设为动态每个子组件都是独立的！
🏆 前端领域优质创作者
02-21 3129
微信小程序子组件id怎么是变量，微信小程序中selectComponent的使用(wx:for组件内使用id)，微信小程序循环渲染子组件，微信小程序如何让组件的id变成动态的，微信小程序怎么将循环体内插入子组件，微信小程序把组件id设为动态,然后用selectComponent再找到微信小程序子组件的id如何绑定变量，微信小程序将子组件设置动态id后，父组件怎么selectComponent调用呢，循环数组wx:for中使用this.selectComponent获取子组件，微信小程序父组件循环使
【微信小程序】selectComponent得到null分析
Minf的博客
03-27 3675
获取DOM元素失败原因分析
微信小程序16: 组件通信
饭一口口吃的博客
05-07 1265
组件通信是小程序开发中肯定会遇到的问题，父组件如何和子组件进行通讯，子组件如何和复组件之间通讯，父组件如何调用子组件中的方法
微信小程序 this.selectComponent 返回值为 null 的问题
热门推荐
dizzysunshine的博客
01-18 1万+
this.selectComponent(string) 可以返回所使用组件的实例对象 报错原因排查步骤 json 文件中引入了该组件 { "usingComponent": { "header": "../../components/hedader" } } 父组件 wxml 文件中使用了这个组件并且设置了一个 id 或者是 class 类样式 wxml..
微信小程序笔记
qq_41910413的博客
05-07 959
1.JSON配置 2.WXML语法 2.1.数据绑定 WXML 中的动态数据均来自对应 Page 的 data。 数据绑定使用 Mustache 语法（双大括号）将变量包起来； <view wx:if="{{condition}}"> </view> <view wx:for="{{list}} " wx:for-index="index" wx:for-item="itemName"> {{item}} </view> 属性等都需要放在双引号中间，
微信小程序 API selectComponent 获取组件返回 null 的记录
爱开车的彬哥的CSDN博客
07-29 1369
问题描述 /** 在Page 生命周期 onready 获取组件实例 */ onReady(){ this.targetComponet = this.selectComponent('#targetCompoent'); } /** wxml **/ <targetCompoent id="targetCompoent"></targetCompoent> bindEvent(e){ this.targetComponent.fun(); /** this.tar
MacBook微信小程序使用selectComponent获取自定义组件时，返回null的解决方案
ljw_Josie的博客
01-25 1866
最近换了MacBook开发小程序，发现this.selectComponent 获取到的自定义组件为null，代码没有做任何改动，但就是拿不到值。 网上查了一下有大部分人都说把this.selectComponent写在onShow里面，因为onLoad可能没有加载完dom，拿不到组件。 But！！我放在onShow也没有用，仔细排查了一下代码发现，是因为我在组件外层加了wx:if的判断，去掉就好了。 真的蛮奇怪的，其他同事和windows电脑都没有这个问题=.= 记下来，帮大家排坑吧 ...
微信小程序selectComponent返回null的问题排查与分析
生擒嫦娥炖玉兔的博客
12-26 1万+
要想小程序界面好看，还原UI妹纸设计的界面，小程序自带的组件肯定是无法满足所有需求的。那想要还原比较炫酷好看的UI的时候就必不可少需要自定义组件了。写过许多自定义组件了，也遇到过许多坑，这里说一个比较头大的坑，就是引入自定义组建的时候，使用selectComponent获取自定义组件对象时，返回null的问题。 简单示例 因为这里我们说的主要是selectCom...
微信小程序selectcomponent 返回null
dancy_xinyun的博客
01-16 1414
问题：界面中使用了wx:if和wx:else包裹自定义组件后，js使用this.selectcomponent(’#id’)方法获取值为null 修复：可以外层套一个view，设置hidden属性来控制组件的显示和隐藏。wx:if导致组件没渲染出来selectComponent返回的就是null。 ...
this.selectComponent(“#xxx“) 出错
m0_57730492的博客
06-25 427
原因很可能是没有在json文件中引入对应的组件。
第一周打卡
A822089447的博客
05-21 461
在本周我学习了如何使子组件和父组件通信，笔记如下： <!-- 属性绑定： 用于实现父亲向子传值，且只能传递普通类型的数据 事件绑定： 用于实现子向父传值 1、先在父子间的js中定义将事件传递给子组件的函数 2、父组件的wxml中，通过自定义事件的形式引用该函数，传递给子组件 3、在子组件中使用this。triggerEvent('') 4、在父组件中的e.detail可以看到传递的数据 获取组件实例： this.se...
微信小程序转uniapp：3）微信this.selectComponent获取组件实例不适用uniapp。
sziitjin的博客
11-17 6303
在使用微信小程序获取子组件实例对象时，我们通常会使用this.selectComponent("#id")，然而在uniapp上是无法获取到组件对象的。该如何解决这个问题呢？我推荐大家使用 $refs ，顺便介绍一下uni-app $refs的基本用法。 $refs的基本用法：一个对象(Object)，持有注册过 ref 特性 的所有 DOM 元素和组件实例。 简单的说就是通过ref="id"去注册组件，然后使用this.$refs.id获取组件的实例，进而可以使用组建的方法。 代码实现： 微信实
微信小程序组件教程
qq_41974199的博客
07-03 499
微信小程序组件教程 将页面内的功能模块抽象成自定义组件，以便在不同的页面中重复使用；也可以将复杂的页面拆分成多个低耦合的模块，有助于代码维护。 自定义组件由 json wxml wxss js 4个文件组成 首先需要在 json 文件中进行自定义组件声明，将 component 设为 true. json 文件： component 设为 true . { "component": true, } js 文件： Component({ properties: { // 这里定义了inner
微信小程序：selectComponent返回null的问题
一些平时在开发过程中遇到的常见问题，分享给大家
01-04 4539
当小程序自带的组件无法满足所有需求的时候，我们可以参考很多自定义组件。我们这次排查问题就拿比较常用的vant-weapp作为示例：使用selectComponent获取自定义组件对象时，返回null的问题
mpvue vant-weapp 中使用复选框组时,获取不到this.selectComponent
TO_Web的博客
12-02 1152
1. 在mpvue中使用vant-weappUI组件库中使用复选框组遇到 this.selectComponent 找不到问题 1.1 使用过这个的朋友应该都知道 获取事件中的值,要this.mp; 解决找不到的问题 toggle(event) { const { index } = event.mp.currentTarget.dataset; const checkbox = this.$mp.page.selectComponent(`.checkboxes-${index}`);
黑马程序员组件知识大揭秘：从基础到实战
最新发布
m0_57836225的博客
01-27 713
数据监听器用于监听数据的变化，在组件开发中，我们重点学习了observe节点。在value: ''},price: {value: 0},data: {// 组件内部数据},// 当productName或price变化时执行的操作console.log('商品名称或价格变化了', newProductName, newPrice);},methods: {// 组件方法})这样，当或price数据发生改变时，就会触发监听器中的函数，方便我们进行相应的处理。
小程序 学习
m0_66430291的博客
04-19 398
微信小程序父子通信 方法一 // 子组件中定义 properties properties:{ // 属性名:类型 age: Number } <!-- 子组件使用自定义属性 --> {{ 属性名 }} {{ age }} <!-- 父组件传递数据 --> <子组件 属性名="{{ 变量 }}"></子组件> <子组件 age="{{ 18 }}"></子组件> 方法二 通过 selectCompon
微信小程序-父组件调用子组件里面的方法和传参
weixin_45558196的博客
05-26 414
子组件内需要有函数 son_method(data){ console.log(data); }, 给子组件添加id <soncomponent id="soncomponent" /> 父组件内通过this.selectComponent("#id")调用方法 father_method(){ let data = this.data.data; this.selectComponent('#soncomponent').son_method(data).
微信小程序开发【从0到1~入门篇4】
m0_49263811的博客
08-07 1482
微信小程序前后端开发快速入门系列教程. 前言. 累计现在已经有 10 篇教程，用备忘录项目从小程序前端开发到后端开发都有分享。 微信小程序前端开发快速入 …
微信小程序之调用子组件中的属性或方法
qq_44821064的博客
06-19 2066
然后在父组件的.wxml中的触发函数中写入 this.selectComponent（'.class名'） this.selectComponent（'#id名'）然后这个变量名关联了子组件 ，便可调用子组件中的 属性值和方法呢！这样就关联了子组件。正如selecComponent的字面意思 ，选择组件。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值