Vue组件中父子嵌套的组件生命周期问题

Question

在我使用vue开发组件时、有个组件嵌套的案例：

<div v-show="isShow">
    <child-component ref="child"></child-component>
</div>

这中情况下、当我在watch中监听isShow为true时、我要操作child子组件、或者在updated钩子中操作子组件：

this.$refs.child.子组件的方法

有时候会报错

this.$refs.child is undefined

也就是说、这个时候子组件没有渲染完成

不知道是不是控制流程有问题、还是说、子组件的生命周期和父组件不同步？

Answer 1

Vue.nextTick(function () {
    //试试这个
})

Answer 2

v-show的原理是通CSS中的display属性来设置，其值变化对象的是CSS属性的变化，组件自身并没有销毁，也就是说通过this.$refs是能够看到子组件的，因为子组件并没有销毁和重建，按理说在updated()和watch中是可以看到子组件的，您可以在检查一下是不是别的原因。