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的原因（即你的子组件没渲染到，你就去拿了）！

• « 上一篇：Mac缓解或关闭鼠标加速
• » 下一篇：Java中的判断语句