ref获取组件实例失败，输出undefined

项目中用到父组件调用子组件的方法，想到用ref获取组件实例。然后调用方法，但是一直失败显示方法undefined，打印组件实例也是失败，好习惯就是立刻百度。 我的问题出现在点击按钮弹出el弹窗，调用弹窗子组件上的方法。

百度后，解救方法是把方法放到 this.$nextTick(() => { })中，我尝试了一下确实解决了bug。那就看看this.$nextTick(() => { }是什么吧。 看到项目里有的页面经常会看到this.$nextTick()，一般是放在created声明周期函数上的。 nextTick是关于dom更新，有异步的味道。 `this.$nextTick()方法主要是用在随数据改变而改变的dom应用场景中，vue中数据和dom渲染由于是异步的，所以，要让dom结构随数据改变这样的操作都应该放进this.$nextTick()`的回调函数中。 在created生命周期中调用的函数一般都需要放在this.$nextTick()中，获取的更新后的dom，

比如点击按钮更改页面文字，只有放在this.$nextTick()中才会生效。相当于延时器

简单理解就是页面渲染完成后再执行this.$nextTick()中函数。 而我的组件是嵌套在el弹窗中的，点击按钮弹出弹框，此时真正的子组件还没有渲染完成，所以无法获取到子组件，放到this.$nextTick()就是在dom渲染完成后再获取组件实例，此时就可以获取成功了。

ref 加深一下ref的知识，给子组件绑定ref，可以获取到组件实例，实现子传父的功能，实际就是获取子组件的数据和方法，自然就可以在父组件上调用子组件了，是组件间通信的常用的一种方法。类似js通过id获取元素是一样的。

<!-- 新增弹窗 编辑 --> <el-drawer :title="addtitel" :visible.sync="isSHowaddDrawer" :direction="direction" :before-close="handleClose1" append-to-body size="50%"> <addDrawer v-if="isSHowaddDrawer" ref="children" @on-load="onLoad"></addDrawer> </el-drawer> //编辑按钮点击 editList(row, index) { this.addtitel = "编辑" this.rowform = row this.$store.commit('isSHowaddDrawer', true) this.$nextTick(() => { let chiid = this.$refs.children chiid.getDetail(row.id) }) },

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 13 天，点击查看活动详情