Vue踩坑——this.refs为空

最新推荐文章于 2024-05-28 21:49:42 发布
最新推荐文章于 2024-05-28 21:49:42 发布
阅读量1.1w 收藏 4
点赞数 6
分类专栏： Vue 文章标签： vue this.refs为空
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_29339163/article/details/91547593
版权

Vue踩坑——this.refs为空

我们在用vue的时候，会遇到一些坑，比如我们使用 this.$refs 获取不到值，页面明明有啊
在这里插入图片描述
百思不得其解……原来这个跟Vue的钩子有关系

总结来说：
1、必须要等页面中的ref子组件加载完毕，才可以获取到
2、在mounted之前的钩子函数中获取不到
3、组件在v-if为false的父节点下，导致这个子组件未渲染，也是导致获取不到的因素，不要忽视哦

零散大使
关注
  • 6
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue 解决通过this.$refs来获取DOM或者组件报错问题
10-15
主要介绍了Vue 解决通过this.$refs来获取DOM或者组件报错问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue列表单项展开收缩功能之this.$refs的详解
10-17
在Vue.js中，`this.$refs` 是一个用于获取组件实例引用的重要特性，它允许开发者直接访问DOM元素或自定义组件实例。在这个场景中，`this.$refs` 被用来实现列表单项的展开和收缩功能。下面我们将深入探讨如何使用`...
vue this.$refs 打印出来是空的原因
qq_29454203的博客
06-22 6507
在多组件的页面使用 this.$refs 调用其他 vue 组件中的方法功能，一直报错： TypeError: Cannot read property ‘length’ of undefined 尝试了很多解决方法，最后发现问题出现在了 this.$refs 上，在页面打印这个值是一个空的 打印效果： this.$refs为空的原因其实是组件的位置存放不正确，需要将组件放到template中的主dom元素中： 失败的存放位置： 修改之后的位置: ...
vue中在mounted使用$refs获取不到DOM元素
最新发布
m0_50207524的博客
05-28 826
在使用ref的时候，在mounted中通过$ref获取节点是获取不到报undefinedthis.$refs.xx 为 undefined。
vue单文件组件无法获取$refs的问题
12-28
记录一下学习webpack+vue碰到的一个大坑，踩这个坑是我才疏学浅的表现，特此引以为戒。因为该坑实在是太坑了！ 代码 header.html <body> <div id=popup-wrap> <popup ref=popup></popup> </div> </body> header.js import popup from '../../components/popup/popup.vue' import './header.scss' let header_vue; $(function () { header_vue = new Vue({
this.$refs 为空问题
L_H_H博客
06-12 4154
子组件 <sonCompent v-if="false"> </sonCompent> 注意：1.v-if 会导致 this.$refs 为空 2.使用this.$nextTick(() => {}) 也是为空 解决方案：方法1. 将v-if 改为 v-show ,再使用 this.$nextTick 不过还是有问题，第一次点开为未定义...
【Vue】在created钩子函数中: this.$refs为空对象
chen__cheng的博客
04-06 2701
原因: 在created()被调用的时候，此时Vue才完成了数据监测、数据代理等过程，能够访问data、methods数据，但是还未进行模板解析。而ref是在DOM树渲染完成之后生成的，所以this.$refs= {}。 解决： 在mounted()钩子函数中获取，mounted()此阶段DOM树已经渲染完成。 在created()钩子函数中，加入：this.$nextTick()方法，由于此方法是会在DOM 更新循环结束之后执行延迟回调，所以可以在此方法中获取子组件实例。 ...
[原创] vue中的this.refs为空出现原因分析
大象的博客
06-08 3万+
场景：在使用vue过程中，本想调用子组件的数据，但尝试多次一直获取失败。经过分析有以下原因： 1，在生命周期mounted之前的钩子函数中去调用会获取不到，原因是DOM节点都没有生成。 2 ，this.refs的组件在v-if为false的父节点下，导致这个子组件未渲染，所以获取不到。 总结:一定是组件已经渲染成功才能调用组件的数据。而不是页面加载完成后就一定能获取到...
vue的this.$refs为空,$refs.xx组件为undefined
weixin_44952258的博客
07-15 1979
针对vue的this.$refs为空,组件找不到的情况
解决vue.js this.$router.push无效的问题
10-18
今天小编就为大家分享一篇解决vue.js this.$router.push无效的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue中的this.$options.data()和this.$data用法说明
10-15
在Vue.js框架中，`this.$options` 和 `this.$data` 是两个非常重要的属性，它们分别用于获取组件的配置选项和当前实例的数据对象。在开发过程中，正确理解和使用这两个属性对于管理组件的状态至关重要。 首先，`...
在Vue中使用this.$store或者是$route一直报错的解决
10-16
今天小编就为大家分享一篇在Vue中使用this.$store或者是$route一直报错的解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue中 this.$set的用法详解
10-16
在Vue.js框架中，`this.$set` 是一个关键的方法，用于处理响应式数据更新的问题。在某些情况下，当你尝试直接修改对象的属性或数组的元素时，Vue可能无法检测到这些变化，进而不会自动更新视图。`this.$set` 方法...
vue-demo——脚手架.zip
12-02
Vue.js 是一款非常流行的前端JavaScript框架，用于构建用户界面。Vue Demo 脚手架是一个预配置的项目模板，帮助开发者快速启动Vue应用程序的开发。它包含了一系列必要的工具和配置，使得开发流程更加高效和规范。 ...
Vue中this.$router.push参数获取方法
11-26
传递参数的方法： 1.Params 由于动态路由也是传递params的，所以在 this...页面通过path和query传递参数，该实例中row为某行表格数据 在目标页面通过this.$route.query获取参数： this.$route.query.row.xxx 以上这篇
Vue后台管理——路由.rar
05-01
"Vue后台管理——路由"这个压缩包文件很可能是包含了一个关于Vue.js后台管理系统中的路由实现的实例教程或代码库。 1. **路由注册**：Vue.js 使用 `vue-router` 插件来管理应用的路由。在初始化Vue实例时，我们需要...
this.$refs 获取不到值 undefined 问题
会点php的前端小渣渣
10-21 2985
最近刚好又碰到ref为空问题，记录下 当我们在 vue 项目中，想要通过$refs 来获取元素时，会出现获取不到的BUG,原因是，dom 节点 异步加载机制， 解决方案：this.$nextTick 来解决 但是有时候 即使加上了 也是依旧报错 原因是： v-for 循环 得到的不止一个 解决方案 this.$refs[refName][0] 还有一个原因是 v-if v-show 进行的设置 具体问题 需要具体解决 例如像我这样： 我这个比较特殊是从子组件发出来的。。。而且又...
vue3使用ref获取dom结果为‘null’
m0_56683897的博客
03-22 7125
这就是生命周期的问题了，setup本质上相当于vue2中的created，在创建阶段，dom元素还未完全创建完成，此时获取dom自然为null了。如果你使用了setup语法糖，那么你在使用时可能会出现ref.value取不到子组件里的值，或者报错ref.value对象为空的情况，那是因为在语法糖中获取到的是一个proxy值。setup的return中应该抛出ref封装的字段，否则ref的值只是定义了并不能响应式使用，事实上，所有ref或者reactive定义的值都应在return中抛出。
vue中ref的使用（this.$refs获取为空）
热门推荐
如果不是现在，那是什么时候呢
04-06 4万+
//6.14更新 但是有个办法，我们可以使用 this.$nextTick(() => { // todo }) setTimeout(() => { // todo }, 0) 来得到数据 ref 本身作为渲染结果被创建，在初始渲染的时候不能访问他们，是不存在的 $refs不是响应式的，只在组件渲染完成后才填充 用于元素或子组件注册...
vue中的 this.$refs
09-07
在Vue中，this.$refs是用来获取DOM元素或组件的引用的。当ref写在标签上时，通过this.$refs.名字可以获取到该标签对应的DOM元素。当ref写在组件上时，通过this.$refs.名字可以获取到该组件的引用。 在Vue实例中，可以通过this.$refs来获取整个Vue实例中所有的引用。例如，可以使用this.$refs.hello来获取到具有ref='hello'的div元素的引用，并通过innerHTML属性获取其内容。<span class="em">1</span><span class="em">2</span><span class="em">3</span>

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值