Vue中如何检测子组件是否已挂载并同步至父组件？

问题原因 #

你当前的代码存在核心问题：

1. 事件绑定错误：父组件模板中@is-child-mounted="childMounted"的写法无效——childMounted是data中的布尔变量，并非事件处理函数，子组件触发的isChildMounted事件无法正确更新父组件状态。
2. 即使绑定正确，若未理解Vue生命周期顺序，也可能导致逻辑执行时机偏差（不过Vue2/3中父组件mounted均晚于子组件mounted，修正绑定后即可解决）。

正确解决方案 #

方案1：直接在事件绑定中赋值（最简写法）

修改父组件模板，将事件触发的值直接赋值给childMounted：

<child @is-child-mounted="childMounted = $event" />

<script>
export default {
  data() {
    return {
      childMounted: false,
    };
  },

  mounted() {
    // 此时子组件已完成挂载，childMounted为true
    if (this.childMounted) {
      // 执行你的逻辑
    }
  },
}
</script>

方案2：通过方法处理事件（适合需要额外逻辑的场景）

如果需要在状态更新时执行更多操作，可定义事件处理方法：

<child @is-child-mounted="handleChildMounted" />

<script>
export default {
  data() {
    return {
      childMounted: false,
    };
  },

  methods: {
    handleChildMounted(isMounted) {
      this.childMounted = isMounted;
      // 可直接在这里执行子组件挂载后的逻辑，无需等待父组件mounted
      if (isMounted) {
        // do something
      }
    }
  },

  mounted() {
    if (this.childMounted) {
      // do something
    }
  },
}
</script>

补充说明 #

Vue的生命周期执行顺序为：父组件beforeMount → 子组件beforeMount → 子组件mounted（触发事件） → 父组件mounted。因此只要事件绑定正确，父组件mounted钩子执行时，子组件必然已完成挂载，childMounted状态会被正确同步。

内容的提问来源于stack exchange，提问作者World's famous people