Vue中获取this.$refs为undefined的问题

Vue获取this.$refs为undefined

最近在修改bug的时候，需要获取到dom元素进行操作

条件是通过屏幕宽度来改变获取到dom元素的定位位置，我选择通过JS的方式去改变

• HTML代码

<div ref = "mydiv"></div>

• JS

created(){ 
    console.log(this.$refs.mydiv)
}

控制台打印的时候为undefined

然后开始检查字母和用法，发现都没有问题，就只有在 methods 函数里面也打印一下，这个时候发现打印就完全没问题，也得到我想得到的了，那问题应该就出在生命周期函数 created 上了，去查阅资料，果不其然

这个时候就需要说一下两个生命周期函数了：

• created （实例创建成功，此时 data 中的数据显示出来了，dom还未生成）
• mounted（dom生成，data数据在模板中显示出来）

如果在created方法里this.$refs[dom]去获取dom节点是获取不到的

因为dom还没有被渲染出来，而在mounted方法里是可以拿到的

Vuejs this.$refs 调用报undefined的处理

项目场景

Vue 2.6.10版本中，父组件获取子组件问题。

问题描述

父组件调子组件方法报undefined找不到

父组件中使用子组件代码  <UploadFile ref="refupload" ></UploadFile>

报错：

先console.log(this.$refs);发现外面没有refupload，里面有对象，不是undefined。

然后直接通过console.log(this.$refs.refupload);输出，结果undefined报错。

原因分析

外层有v-if包裹，导致未渲染报错。

解决方案

初步错误的尝试：仅使用this.$nextTick方法，结果还是获取undefined

有效方案1：使用this.$nextTick，但需要注意v-if条件中参数的赋值需要和this.$nextTick在同一个方法体中！

有效方案2：v-show 替换掉v-if

拿到输出结果：

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。