Vue3等到子组件被挂载

Question

我想在渲染工具提示之前等待子组件挂载。在等待期间，我将有一个占位符显示给用户。

一个示例组件是：

<template>
   <div v-if="!mounted">Loading...</div>
   <child-component></child-component>
</template>
<script>
export default defineComponent({
   setup() {
       const mounted = ref(false);       

       return { 
           mounted
       } 
   }
});
</script>

经过研究，Vue2似乎支持组件的生命周期钩子，这会将上面的代码更改为：

<template>
   <div v-if="!mounted">Loading...</div>
   <child-component @hook:mounted="mountedCheck"></child-component>
</template>
<script>
export default {
export default defineComponent({
   setup() {
       const mounted = ref(false);       
       const mountedCheck = () = {
           mounted.value = true;
       }       

       return { 
           mounted, mountedCheck
       } 
   }
});
}

但是，我似乎无法让@hook:mounted 工作。 Vue3中是否有类似的东西，或者我错过了什么？

Answer 1

子组件需要发出那个钩子

孩子：

<script>
export default defineComponent({
  setup() {
    onMounted(() => {
      const { emit } = getCurrentInstance();
      emit('mounted');
    })
    return {};
  }
});
</script>

父母

<template>
   <div v-if="!mounted">Loading...</div>
   <child-component @mounted="mountedCheck"></child-component>
</template>