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

拿到输出结果：

这篇好文章是转载于：编程之路