Wie überprüfe ich, ob eine Unterkomponente in Vue gemountet ist?

Question

Ich möchte überprüfen, ob die untergeordnete Komponente installiert ist, und diese Informationen in die übergeordnete Komponente verschieben. Dafür verwende ich launch. Hier ist das Beispiel meiner übergeordneten Komponente:

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

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

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

In der untergeordneten Komponente habe ich „is-child-mounted“ in „true“ geändert:

mounted() {
    this.$emit('isChildMounted', true);
  },

Aber if (this.childMounted) ist immer noch falsch. Wie kann man also die übergeordnete Komponente überprüfen, wenn die untergeordnete Komponente gemountet ist?

Answer 1

您可以在父组件的子组件上添加侦听器。它看起来像这样：

Vue3
      <Component
        @vnodeMounted="handleMounted"
      />

Vue2
      <Component
         @hook:mounted="handleMounted"
      />

您可以将钩子名称替换为您想要监听的生命周期名称！我想它应该很少使用，因为它没有出现在文档中，因此是一个内部 API，注定不能直接使用。

来源：

• https://github.com/vuejs/core/issues/4345 #issuecomment-899082892
• https://github.com /vuejs/vue/blob/8d3fce029f20a73d5d0b1ff10cbf6fa73c989e62/src/core/instance/lifecycle.js#L348