vue 根节点 v-if导致父组件$ref引用undefined的问题

最新推荐文章于 2025-03-03 13:46:54 发布

weixin_30609287

最新推荐文章于 2025-03-03 13:46:54 发布

阅读量738

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/gloxing/p/7529521.html

vue 2.4x版本会清理无节点的数据，会将refs设置为undefined，如果根节点有这种情况，暂时改成v-show，避免$ref失效问题

转载于:https://www.cnblogs.com/gloxing/p/7529521.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_30609287

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

Vue和Vue-Element-Admin（十四）：vue3.x与vue2区别分析

叶子叶来

11-16

436

从切实开发使用总分析vue3.x与vue2区别，包括组合api、router、生命周期、父子组件与watch使用等等；

VUE面试题

永生天地

02-17

1552

一、vue 生命周期先看一张图片，图片来源于官网：https://cn.vuejs.org/v2/guide/instance.html 以上钩子详细：（只解释了几个主要的） 1.beforeCreate 在页面被加载的时候首先会创建一个Vue的实例，并且初始化该实例，在实例初始化之后，此时被调用的生命周期钩子叫做：beforeCreate,这个时候数据的观测和事件还没有被调用（特就是说此时还读取不到data里面的数据和实力内的方法） 2.created 当vue实例初始化后，实例创建完成后立

参与评论您还未登录，请先登录后发表或查看评论

vue3通过ref调用子组件方法，第一次点击报找不到该方法，ref和v-if冲突

小夏同学呀

01-19

2219

vue3通过ref调用子组件方法，第一次点击报找不到该方法，ref和v-if冲突

使用v-if后获取this.$refs.xxx为undefined

WeiflR10的博客

01-04

1255

原因就是在获取的时候，dom元素并没有加载完成。解决方式：使用$nextTick $nextTick定义：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。 this.$nextTick(()=>{ console.log(this.$refs.aaa) }) ...

使用v-if 后获取this.$refs.xxx为undefined

qq_40576178的博客

09-30

928

解决办法：标签上使用 v-show，在mounted中this.$nextTick包裹定时器，定时器中写获取ref的元素 <div class="firstTitle" v-show="showThree=='治理成效'"> <div class="leftContent"> </div> <div class="rightContent"> <div class="listContent"></div> &l

vue ref和v-if冲突问题

bloestone的博客

08-14

7378

使用vue对单表实现对单表的查询与修改查询页面作为父组件 单条记录修改作为子组件使用v-if控制修改界面的显示与隐藏使用ref将父组件要修改的记录传递给子组件，调用子组件的方法进行数据传递时，调试发现子组件undefined <modformref="refModForm" v-if="visibleModForm === true" @cancelMod="cancel...

vue中v-if和ref的冲突

z1216108894的博客

01-13

1581

vue中v-if和ref的冲突

2021-12-24 面试题:vue(一) v-if和v-show的区别,nextTick,vue样式穿透,scoped的原理,路由导航守卫,ref,MVVM

GAARA

12-24

192

文章目录 1.v-if和v-show的区别 2.this.$nextTick 是如何设计的？nextTIck是什么? 回答使用场景 3.vue是如何做样式穿透的? 回答: 为什么要样式参透 scoped底层原理参考博文 4.scope的原理回答 5.路由导航守卫有哪些? 回答注意事项参考博文 6.ref是什么? 回答 7.什么是MVVM 回答参考

2.5 Trigger源码分析 -- ant-design-vue系列

weixin_44438233的博客

09-10

1389

ant-design-vue源码分析，dropdown源码分析的最后一篇，剩下的都是传参的逻辑了。

VUE3学习第五章 Teleport传送组件、keep-alive缓存组件、transition动画组件、transition-group过度、依赖注入Provide/Inject、兄弟组件Mitt

m0_55170432的博客

11-09

1112

学习

Vue3获取v-if中的ref

xiaobaicai_666的博客

04-02

5896

在v-if中当为false时，此时dom未被渲染,无法获取到该元素 <div ref="myref" v-if="flag"></div> setup(){ const flag = ref(false) const myref = ref() return { flag, myref } }

【Vue踩坑】v-if与$refs的爱恨情仇

qq_29162275的博客

10-25

857

这些天工作对老项目进行页面维护，为了控制权限故使用v-if，本着能不造轮子就不造轮子的原则想调用老前辈已经写好的方法，结果给我整个报错，我真的是爱死了。本着老版本能跑，新版本能用就用的原则，控制台打印后发现是因为没有找到对应的子组件，后来一想可能是因为v-if导致的渲染问题毕竟。故可能因此找不到对应的ref，所以就只需要让方法等等dom更新就好了，所以使用 this.$nextTick() 来解决问题。为什么通过v-if控制是否显示的子组件就无法使用ref了？运行之~不报错~爽！

Vue里面的坑哦，不能将v-if或v-else-if或v-else和ref一起使用，不然获取不到真实元素

06-22

1363

真实的踩坑经验，虽然在控制台能打印出ref真实dom对象，但是就是不能用啊，问题的根源就是在你的ref元素和v-if一起使用了，是的，没毛病: 无论是v-if或v-else-if或v-else，都不能和ref一起使用，而且不论是直接使用，还是在子元素上使用ref，都会获取不到真实dom元素的。

vue调用ref，子组件undefined问题，原因是v-if

qq_39117154的博客

08-16

3661

vue，ref，v-if

使用ref实例时，dom节点不能使用v-if

qq_14993591的博客

01-25

429

Cannot read properties of undefined (reading ‘setInfo’) 使用refs调用子组件的方法，由于使用v-if导致节点不存在，所以无法获取实例，就会导致报错。解决方案：使用v-show。参考：使用ref实例时，dom节点不能使用v-if ...

this.$refs 与 v-if 的冲突解决方法

h666000的博客

08-03

1529

this.$refs 与 v-if 的冲突解决方法因为if渲染的原因，所以refs还没挂载上去，所以打印这个this.$refs == undefined 解决方法： console.log(this.$refs) //无 setTimeout(() => { console.log(this.$refs) //有 }, 0); ...

子组件通过v-if 来控制显示隐藏与 ref ，DOM渲染的问题！

小明的博客

08-05

6204

注释：通过v-if来控制子组件显示隐藏，然后发现子组件的this.$refs都是undefind.的问题首先是父组件通过 poprs来进行传递数据控制子组件的显示隐藏。子组件再父组件的引用子组件是通过该属性然后v-if来控制显示隐藏。然后操作就是获取子组件的$refs的DOM元素，结果发现获取不到，再mothed里面也是获取不到的。后面查资料后发现，refs不是动态，需要等页面渲染完成后才能拿到DOM元素。问题清晰后，有几种方法可以解决，就是解决v-if当..

ref与 v-if 的约束

aaaaaaaalook的博客

03-03

816

v-if先执行v-if的条件判断会先执行，决定是否渲染组件或 DOM 元素。ref绑定在渲染完成后如果v-if的条件为true，组件或 DOM 元素会被渲染，ref会在渲染完成后绑定。如果v-if的条件为false，组件或 DOM 元素会被销毁，ref会被解绑，值为undefined。nextTick的作用使用nextTick可以确保在 DOM 更新完成后再访问ref，避免访问到undefined。

v-if导致用ref取不到元素的解决办法

weixin_45905700的博客

05-09

9107

今天在写一个功能的时候需要给一个用ref取到并且用this.$refs("")获取到的元素并且用this.$refs("XXX")[0].style渲染出来的div加一个提示框，当时第一反应是用vue的Tooltip 文字提示组件，比较方便，就用el-tooltip在外面包了一层。错误写法：需要提示的内容是需要在页面进行某一操作后才可以得到的，所以有可能是undefined，就自然而然的加入了v-if，但是只要这个v-if加上就开始报错，打印出来发现是this.$refs("")获取到的值u..

vue3使用ref获取form表单高为undefined