vue中this.$refs的坑及解决
更新时间：2022年03月25日 15:39:55 作者：Er_很哇塞啊
这篇文章主要介绍了vue中this.$refs的坑及解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
vue this.$refs的坑
在开发中，有时需要使用到this.$refs ，用于操作真实的DOM节点。
说一说我在使用的时候，在开发时碰到了一个小需求，需要子组件向父组件传参，而且是不需要通过事件传递的，一开始使用this.$emit()来写的，但是一直没有接受到参数，于是放弃了使用this.$emit()的使用。
于是，使用了在父组件中调用子组件的方法，来获取传递的参数。但是还是没有获取到传递过来的参数。
以下三点小坑坑
1、使用this.$refs如果要在mouend()中使用，必须要在this.$nextTick(()=>{ } ) 这里面实现，要不是找不到ref，原因是mouned（）之后，BOM节点还没有完全挂载上，于是找不到定义的ref。
2、可以直接在updata()的生命周期函数中使用，不用写this.$nextTick(()=>{ } )
3、在methods:{ } 方法中使用，也需要使用this.$nextTick(()=>{ } ) 等到页面完全渲染完毕之后在调用即可
vue的坑 this.refs为空
我们在用vue的时候，会遇到一些坑，比如我们使用 this.$refs 获取不到值，页面明明有啊
百思不得其解……原来这个跟Vue的钩子有关系
总结来说
1、必须要等页面中的ref子组件加载完毕，才可以获取到
2、在mounted之前的钩子函数中获取不到
3、组件在v-if为false的父节点下，导致这个子组件未渲染，也是导致获取不到的因素，不要忽视哦
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
作为使用Vue已经很多年的人，特别是去年一直在使用 Vue3，因此，学到了很多东西。所以本文为大家准备了7个让我们成为更好 Vue 开发者的技巧，需要的可以参考一下2022-06-06
这篇文章主要介绍了15分钟上手vue3.0，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-05-05
关于vue的npm run dev和npm run build的区别介绍
这篇文章主要介绍了关于vue的npm run dev和npm run build的区别介绍，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-01-01
这篇文章主要介绍了vue对象复制方式(深拷贝,多层对象拷贝方式在后面)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
Vue-cli3执行serve和build命令时nodejs内存溢出问题及解决
这篇文章主要介绍了Vue-cli3执行serve和build命令时nodejs内存溢出问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
在本篇文章里小编给大家整理的是关于VUE 项目初建和常见问题以及相关知识点内容，有需要的朋友们学习下。2019-09-09
这篇文章主要介绍了vue使用gitshot生成gif问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
在开发项目的时候，我们一般都用 vue-cli 来避免繁琐的 webpack 配置和 template 配置。这篇文章主要介绍了如何写一个 vue 插件,需要的朋友可以参考下2019-06-06
对于浏览器来说,文本、图片等可以直接打开的文件,不会进行自动下载,下面这篇文章主要给大家介绍了关于Vue实现下载文件而非浏览器直接打开的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-05-05
这篇文章主要介绍了在Vue中通过vue-router实现命名视图,本文给大家提到了vue-router的原理解析，给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-04-04
最新评论