uniapp中this.$refs无效获取为空小程序$refs获取对象为空

7月前作者：码上致富分类：Toy博客阅读(26) 违法举报

这篇具有很好参考价值的文章主要介绍了uniapp中this.$refs无效获取为空小程序$refs获取对象为空。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、问题描述

在小程序里通过this.$refs的方式获取自定义组件：

<fresh-city-picker ref="freshCityPicker"></fresh-city-picker>

通过$refs,获取为空,该代码在onload中不行，等页面渲染完成后，通过点击的方式又能获取

that.$refs.freshCityPicker

在网上找了一圈，搜索关键词，小程序端不能使用vue的$refs么？在官网也搜了下都说是小程序本身就不支持操作dom，要获取dom信息请用uni.createSelectorQuery()这种

 uni.createSelectorQuery().in(this).select("#id")._component.$children

二、解决方法

最后发现是我在页面最开始用v-if做了个判断，如果为空，整个页面不显示导致的，将v-if缓存v-show就行了。。文章来源地址https://www.toymoban.com/news/detail-506876.html

到了这里，关于uniapp中this.$refs无效获取为空小程序$refs获取对象为空的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

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

分享到：

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

Vue + el-ui table 内嵌 input 调用 focus 方法无效；this.$refs.xxx.focus()方法无效

1、先说需求 a.在表格编辑态的时候，可以在①处敲击“回车键”，光标能跳转到②处 b.表格可以在浏览态和编辑态切换，用v-show来实现的编辑和浏览 2、代码片段（这种方式不生效）页面显示代码： methods方法： 3、页面效果如图，当在第一行 9999 处敲击回车之后

2024年02月05日
浏览(36)
less中:export 无效问题，vue-cli中导出公共变量，js对象为空对象

试例解决方案注：在vue-cli v5版本中requireModuleExtension是已经被移除了。在没有任何配置的情况下打印出来的就是一个空对象通过阅读官方文档，发现可以根据约定将文件名改为.module.(css|scss|sass|less|styl(us)?)结尾，这样就可以识别出css module。这里是将自己项目中的variables.le

2024年02月13日
浏览(53)
uniapp中开发小程序使用ref获取dom实例，一直显示undefined，竟然发现是这个原因！

小程序是不能使用getElementById之类的dom api，所以考虑使用ref来获取dom元素，但事实上并不是如此，绑定ref后并没有输出我想要的dom元素。既然console.log(this.$refs.iRef)为undefined，会不会this.$refs也是undefined？然而this.$refs是有值的，就是没有iRef，那么到底是为什么？会不会是需要

2024年02月11日
浏览(33)
uniapp开发微信小程序登录获取openid并解决code无效问题：invalid code

场景：实现微信支付的时候需要获取到openid,openid需要在登录的时候用登录返回的code获取 1.登录获取 code ，用code获取 openid 解决方法：报错code无效：invalid code： 1.先在微信小程序管理平台找到APPID，这里的 https://mp.weixin.qq.com/wxamp/devprofile ； 2.检查项目的project.config.json的APP

2024年02月11日
浏览(46)
uniapp 组件引用 TypeError: this.$refs.xxx is not a function 解决方法（全）

因为自己的项目中，某些常用模块自己定义了组件，使用时常出现 TypeError: this.$refs.xxx is not a function （即没有xxx这个方法），结合网友和自身遇到的问题，得出三种方法第一种：引用注册即在页面中 import 组件。解决方法：查看是否组件引用正确。第二种：组件在循环

2024年02月11日
浏览(35)
uniapp读取(获取)缓存中的对象值（微信小程序）

大家好！我是夏小花，今天是 2024年4月24日|农历三月十六，在我们日常开发中，做小程序可能会往缓存中存值或者是存对象，今天这篇博客文章主要是讲如何在微信小程序如何读取缓存中的值和如何向缓存中存值。满满干货哦！！！下面这段代码是基于uniapp进行向缓中存值

2024年04月25日
浏览(49)
vue中使用this.$refs获取不到子组件的方法，属性方法都为undefined的解决方法

因为注册了多个ref，获取是不能单单知识refs.xxx，需要使用数组和索引来获取具体一个组件refs[index].xxx 额……就像这样😐 好这么一写，导致前两个组件都无法正常使用…… 页面也会有这个报错：组件名 - did you register the component correctly? For recursive components, make sure to provide

2024年02月13日
浏览(40)
Vue获取子组件实例对象 ref 属性

在 Vue 中推荐使用 ref 属性获取 DOM 元素，这种方式可以提高性能。如果将 ref 属性使用在组件上，那么返回的就是这个组件的实例对象。使用方式：`p ref=\\\"xxx\\\"` 或 `Banner ref=\\\"xxx\\\"` 。获取方式：this.$refs.xxx 1.原生 JS 获取 DOM 元素【不推荐】： 2. 通过 ref 属性获取 DOM 元素【推荐

2024年02月04日
浏览(36)
vue3获取this对象

在vue3，获取this对象有两种方式 setup的第二个参数context是执行上下文的参数，打印contex如下所示可以获取子传父属性的对象信息内容emit方法 getCurrentInstance方法，获取当前组件的实例、上下文来操作router和vuex等使用：由vue提供，按需引入：import { getCurrentInstance} from \\\'vue\\\' 此

2024年02月16日
浏览(43)
微信小程序判断对象是否存在或为空

要取节点data.result.image的值，正常情况下有该节点如下图所示但出错的情况下该节点不存在，直接取会出错所以添加节点是否存在和是否为空的判断，存在且不为空时才显示测试发现通过typeof判断节点是否存在时要一层层判断，如果data.result已经不存在，直接判断data.re

2024年02月04日
浏览(49)