Comment vérifier si un sous-composant est monté dans Vue ?

Question

Je souhaite vérifier si le composant enfant est installé et je souhaite déplacer ces informations vers le composant parent. Pour cela, j'utilise launch. Voici donc l'exemple de mon composant parent :

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

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

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

Dans le composant enfant, j'ai changé "is-child-mounted" en true :

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

Mais if (this.childMounted) est toujours faux. Alors, comment vérifier le composant parent si le composant enfant est monté ?

Answer 1

Vous pouvez ajouter des écouteurs sur les composants enfants d'un composant parent. Cela ressemble à ceci :

Vue3
      <Component
        @vnodeMounted="handleMounted"
      />

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

Vous pouvez remplacer le nom du hook par le nom du cycle de vie que vous souhaitez écouter ! J'imagine qu'elle devrait être rarement utilisée, puisqu'elle n'apparaît pas dans la documentation et qu'il s'agit donc d'une API interne, destinée à ne pas être utilisée directement.

Source :

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