Vue $refs 为什么无法获取组件对象

Question

<el-tree ref="permissions_tree" class="permissions-tree" :data="permissions" :props="basicConfig.defaultProps" show-checkbox node-key="id" :render-content="renderNode"></el-tree>

mounted () {

  console.log(this.$refs.permissions_tree);

}

在 mounted 中打印输出的是undefined！这是为什么？

我在表格中渲染的按钮，第一次点击调用 console.log(this.$refs.permissions_tree);得到的也是 undefined，第二次就能正常获取到组件了

Answer 1

可能你用v-if来切换组件展示，所以要在下一个tick才能获取到this.$nextTick(() => {&nbsp; &nbsp; console.log(this.$refs.permissions_tree);});