this.$refs获取不到组件问题

唯一原因：在调用this.$refs的时候没有生成组件

常用解决方法

mounted时调用

mounted() {
    console.log(this.$refs.scrollTop)
},

this.$nextTick (v-for内存在ref时常用)

<el-row>
  <el-col :span="6" v-for="(item, index) in sysList" :key="index">
    <SysItem ref="scrollTop" :id="index" style="height: 20rem;width: 100%;"></SysItem>
  </el-col>
</el-row>

mounted() {
    this.$nextTick(() => {
        console.log(this.$refs.scrollTop)
    })
},

setTimeout (不推荐）

mounted() {
    setTimeout(() => {
        console.log(this.$refs.scrollTop)
    },500)
},

特例：

子组件懒加载问题

加载方式

<Scroll ref="scrollTop"></Scroll>

components: {
Scroll: () => import("@/components/scroll"),
},

有时候会出现dev的时候能加载上，但是部署之后加载不上，并且只有第一次（没有缓存）打开的时候没有加载到，因为使用ES6懒加载的这种方式引入该组件，会将多个模块的js分割打包，所以改组件不会在页面加载完成的时候全部加载，所以在mounted函数中获取不到对应组件,而且this.$nextTick也获取不到组件。

解决方法

1. update时调用
2. import Scroll from 'components/common/scroll/Scroll.vue' （推荐 - 采用原始的组件引入方式，不采用懒加载）

Vue指令 （v-for，v-if，v-show）

加载方式

<Scroll ref="scrollTop" v-if="isLoading"></Scroll>

import Scroll from 'components/common/scroll/Scroll.vue'

v-if等指令，会根据不同的条件去动态的渲染DOM树，因此这些 DOM 在 mounted 阶段是不存在的，在所以使用$refs是不能获取到DOM对象的。

解决办法

1. 将ref 与 vue指令分开使用，不能写在一个DOM上