How to check whether a subcomponent is mounted in Vue?

Question

I want to check if the child component is installed and I want to move that information to the parent component. For this I'm using launch. So the example here is my parent component:

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

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

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

In the child component I changed "is-child-mounted" to true:

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

But if (this.childMounted) is still false. So how to check the parent component if the child component is mounted?

Answer 1

You can add listeners on child components of a parent component. It looks like this:

Vue3
      <Component
        @vnodeMounted="handleMounted"
      />

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

You can replace the hook name with the lifecycle name you want to listen to! I imagine it should be rarely used, since it doesn't appear in the documentation and is therefore an internal API, destined not to be used directly.

source:

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