this.$refs获取不到子组件

this.$refs获取不到子组件

很多时候我们通过this.$refs.xxx去获取一个子组件的时候，会发现是undefined，有以下几个原因，也只可能是以下几个原因：

1.在mounted中调用

调用时机，this.$refs的使用需要在mounted中使用且最好加上this. $nextick来获取子组件。
原因：该子组件在mounted中可能还没渲染完成，加nextick可以保证已经渲染完成了

2.你需要获取的组件身上或者父元素身上带有v-if，需要把v-if更换成v-show（这个是最容易忘记的，也是本次做笔记的原因）

例如：

<div class="tree_box" v-show="treeShow">
              <div class="tree">
                <el-tree
                  :data="treeData"
                  :props="defaultProps"
                  @node-click="(data, node, cur) => nodeClick(data, node, cur, item.prop)"
                  default-expand-all
                  show-checkbox
                  node-key="id"
                  ref="inputTree"
                  :expand-on-click-node="false"
                >
                  <span class="custom-tree-node" slot-scope="{ node }">
                    <span class="em-tree-text" :title="node.label">{{ node.label }}span>
                  span>
                el-tree>
              div>
              <div class="close_btn">
                <el-button type="primary" @click="closeBox">关闭el-button>
              div>
            div>

我是想去获取inputTree这个子组件，但是因为之前我一直在 .tree_box身上写的v-if（且v-if的值为false，页面上就没有这个元素），导致了我想拿这个子组件一直获取不到。

3.this.$refs.xxx获取到的是一个数组。

这种情况是因为你要获取的子组件身处在一个v-for的循环中，你只需要利用数组的下标取出就行

总结，如果你注意到了第一点，那么最大的可能就是因为v-if的原因（即你的子组件没渲染到，你就去拿了）！