vue this.$refs 打印出来是空的原因

最新推荐文章于 2023-10-11 15:18:41 发布
最新推荐文章于 2023-10-11 15:18:41 发布
阅读量6.5k 收藏
点赞数 1
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_29454203/article/details/118105113
版权

Vue $refs TypeError 组件定位 子组件方法
关键词由CSDN通过智能技术生成

在多组件的页面使用 this.$refs 调用其他 vue 组件中的方法功能，一直报错：

TypeError: Cannot read property ‘length’ of undefined

尝试了很多解决方法，最后发现问题出现在了 this.$refs 上，在页面打印这个值是一个空的
在这里插入图片描述
打印效果：
在这里插入图片描述

this.$refs为空的原因其实是组件的位置存放不正确，需要将组件放到template中的主dom元素中：
失败的存放位置：在这里插入图片描述
修改之后的位置:
在这里插入图片描述

爱上_下划线
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue 解决通过this.$refs来获取DOM或者组件报错问题
10-15
主要介绍了Vue 解决通过this.$refs来获取DOM或者组件报错问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
this.$refs 为空问题
L_H_H博客
06-12 4167
子组件 <sonCompent v-if="false"> </sonCompent> 注意：1.v-if 会导致 this.$refs 为空 2.使用this.$nextTick(() => {}) 也是为空 解决方案：方法1. 将v-if 改为 v-show ,再使用 this.$nextTick 不过还是有问题，第一次点开为未定义...
【Vue】Vue的$ref属性为空对象或者为undefined问题及解决办法（涵盖uniapp/H5/微信小程序）
徐海东的博客
07-13 2万+
目录问题：获取this.$refs为空对象或者为undefined原因一：在uniapp中，非H5端只能用于获取自定义组件，不能用于获取内置组件实例（如：view、text）解决方法：ref在非H5端使用在自定义的组件原因二：使用了版本过低的调试基础库原因三：ref组件使用了条件渲染，即v-if、v-show，这些DOM节点在mounted无法被访问到,详细可以看 深入响应式原理-Vue.js原因四：使用了v-for循环动态绑定ref（大部分时请求后端数据动态渲染DOM），this.$ref[name]获取
Vue中$Refs获取为空
m0_71249454的博客
04-12 229
使用延迟器}, 50)
vue的this.$refs为空,$refs.xx组件为undefined
weixin_44952258的博客
07-15 1993
针对vue的this.$refs为空,组件找不到的情况
Vue踩坑——this.refs为空
倾心
06-12 1万+
Vue踩坑——this.refs为空 我们在用vue的时候，会遇到一些坑，比如我们使用 this.$refs 获取不到值，页面明明有啊 百思不得其解……原来这个跟Vue的钩子有关系 总结来说： 1、必须要等页面中的ref子组件加载完毕，才可以获取到 2、在mounted之前的钩子函数中获取不到 3、组件在v-if为false的父节点下，导致这个子组件未渲染，也是导致获取不到的因素，不要忽视哦...
vue列表单项展开收缩功能之this.$refs的详解
10-17
在Vue.js中，`this.$refs` 是一个用于获取组件实例引用的重要特性，它允许开发者直接访问DOM元素或自定义组件实例。在这个场景中，`this.$refs` 被用来实现列表单项的展开和收缩功能。下面我们将深入探讨如何使用`...
Vue中的this.$options.data()和this.$data用法说明
10-15
在Vue.js框架中，`this.$options` 和 `this.$data` 是两个非常重要的属性，它们分别用于获取组件的配置选项和当前实例的数据对象。在开发过程中，正确理解和使用这两个属性对于管理组件的状态至关重要。 首先，`...
Vue 报错TypeError: this.$set is not a function 的解决方法
10-17
在这个例子中，`$.ajax`的`success`回调函数中的`this`并没有指向Vue实例，而是指向了回调函数本身，因此无法调用`this.$set`。 ### 报错原因 在JavaScript中，函数内部的`this`值取决于函数的调用方式。在上述...
vue中ref的使用（this.$refs获取为空）
热门推荐
如果不是现在，那是什么时候呢
04-06 4万+
//6.14更新 但是有个办法，我们可以使用 this.$nextTick(() => { // todo }) setTimeout(() => { // todo }, 0) 来得到数据 ref 本身作为渲染结果被创建，在初始渲染的时候不能访问他们，是不存在的 $refs不是响应式的，只在组件渲染完成后才填充 用于元素或子组件注册...
[原创] vue中的this.refs为空出现原因分析
大象的博客
06-08 3万+
场景：在使用vue过程中，本想调用子组件的数据，但尝试多次一直获取失败。经过分析有以下原因： 1，在生命周期mounted之前的钩子函数中去调用会获取不到，原因是DOM节点都没有生成。 2 ，this.refs的组件在v-if为false的父节点下，导致这个子组件未渲染，所以获取不到。 总结:一定是组件已经渲染成功才能调用组件的数据。而不是页面加载完成后就一定能获取到...
【Vue】在created钩子函数中: this.$refs为空对象
chen__cheng的博客
04-06 2716
原因: 在created()被调用的时候，此时Vue才完成了数据监测、数据代理等过程，能够访问data、methods数据，但是还未进行模板解析。而ref是在DOM树渲染完成之后生成的，所以this.$refs= {}。 解决： 在mounted()钩子函数中获取，mounted()此阶段DOM树已经渲染完成。 在created()钩子函数中，加入：this.$nextTick()方法，由于此方法是会在DOM 更新循环结束之后执行延迟回调，所以可以在此方法中获取子组件实例。 ...
vue项目中当组件绑定v-if或者:visible.sync时，获取不到this.$refs(打印为空）
qq_46103732的博客
06-05 1469
vue项目中当组件绑定v-if或者:visible.sync时，获取不到this.$refs(打印为空）当想要操作该DOM时，在methods中使用this.$refs.map，控制台报错。此时就可以访问this.$refs中的元素了（this.$refs.map）
Vue中获取this.$ref为空对象或者为undefined问题
m0_64520392的博客
03-24 1248
获取this.$ref为空对象或者为undefined
vue3响应式ref console.log输出.value时数据为空直接输出则显示数据 前端异步问题
qq_52790429的博客
10-11 1411
后面研究了一下应该和异步有关系，从这个字典获取到的数据是异步的，拿不到里面的数据！但是我搞不懂为啥打印的时候不带.value就可以打印出来。当我想对获取到的数据字典进行一些操作的时候发现我在setup语法糖里面没办法对这个数据进行相关的操作。后面用watch监听这个数据就可以打印出来。
vue this.$refs.pop获取不到
PrimaryColor
03-04 786
改成数组形式访问： this.$refs['pop]
vue使用$refs获取不到值。
weixin_42721553的博客
05-25 1万+
实现效果是点击按钮，显示倒计时，隐藏发送验证码按钮， 下方是一个倒计时的控件（用的vant）；当点击验证码按钮时，隐藏验证码按钮，显示倒计时按钮，并且开启倒计时； 正常来讲是通的，但是，由于刚开始倒计时按钮，我用的是v-if，所以一直获取不到，再加上$refs不是响应式，还懵逼，后来一想，是v-if的问题。 v-if是直接不渲染（相当于删掉了）这个组件，然后在显示。 v-show只是隐藏起来了。 所以啊，将v-if改成v-show即可 ...
关于vue的 this.$refs.xxx 打印为undefined解决办法
daoxiaofei的博客
09-15 1万+
今天做项目的时候发现，明明this.$refs里面有东西，如下图，但是打印this.$refs.xxx的时候却是undefined，如下图 打印this.$refs: console.log(this.$refs) 但是打印this.$refs.directory和this.$refs.postHeader的时候却是这样的 console.log(this.$refs.directory) console.log(this.$refs.postHeade) 此时问题来了，为什么this.$refs.d
[已解决]Vue页面中的this.$refs.xxx为undefined
授人以渔的博客
05-31 1060
1.页面内容 <div class="qrcode" ref="qrCodeUrl" id="picture"></div> </div> 2.使用代码 var qrcode = new QRCode(this.$refs.qrCodeUrl, { text: codeText, // 需要转换为二维码的内容 width: 100, height: 100, colorDark: '#000000', colorLight
vue this.$refs报错
最新发布
03-01
当使用Vue的this.$refs时，可能遇到一些报错。以下是一常见的报错及其解决方法： 1. TypeError: Cannot read property 'xxx' of undefined 这个错误通常是因为在访问this.$refs时，引用的元素还没有被渲染或者不...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值