提问人：Mr. CC 提问时间：10/12/2023 更新时间：10/12/2023 访问量：46
Vue.js - 如何检查父组件的所有子组件何时挂载
Vue.js - How check all children component of parent component when will be mounted
问：
我需要解决非常深层次的问题（对我来说），检查子组件何时在 DOM（已安装）中准备就绪。 这是演示：https://playcode.io/1625516
有没有简单的方法可以知道什么时候所有的孩子或孩子的孩子都装上了，并且根源父母知道这一点？
一种选择是使用 ResizeObserver（似乎还可以），但我在 Vue 中寻找一些我可能忽略的原生方式。
感谢。
答：
-2赞
ValentynDi
10/12/2023
#1
在 Vue.js 中，你可以使用该函数在组件在 DOM 中渲染后执行代码。这可用于确保装载子组件。
下面是一个示例，说明如何修改代码以用于检测何时装入子组件：$nextTick$nextTick
<template>
<div>
<div v-if="isMounted" style="height: 300px; background: limegreen">C2</div>
</div>
</template>
<script>
export default {
name: 'C2',
data() {
return {
isMounted: false,
};
},
mounted() {
this.$nextTick(() => {
this.isMounted = true;
console.log('C2 mounted');
});
},
};
</script>
在此修改后的版本中，标志设置为 true using ，这可确保在更新标志之前已更新 DOM。这可用于确定组件及其子项是否已安装。isMounted$nextTick
评论
1赞
Mr. CC
10/13/2023
这不会也不可能奏效。我特意在子组件中设置延迟渲染。我对如何在根组件中找出答案并正确计算高度感兴趣，例如，计算高度。你看过演示吗？
评论