[Vuejs]-How to check if child component is mounted in vue?

by

0👍

You can add a listener on the child component fom the parent. It would look like this:

Vue3
      <Component
        @vnodeMounted="handleMounted"
      />

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

You can replace the hook name by the lifecycle one you want to listen to ! I guess it should be used sparsely as it is not present in the documentation and thus be an internal API that is not destined to be used directly.

source:

0👍

Looks like there is a typo in the event name in the child component while triggering the event else code should work fine.

  • It should be is-child-mounted instead of ischildmounted
  • It should be @is-child-mounted="childMounted = true" instead of @is-child-mounted="childMounted"

Live Demo :

Vue.component('child', {
  props: ['childmsg'],
  template: '<p>{{ childmsg }}</p>',
  mounted() {
        this.$emit('is-child-mounted')
  }
});

var app = new Vue({
  el: '#app',
  data: {
        childMounted: false
  },
  mounted() {
    if (this.childMounted) {
      console.log('child mounted');
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <child childmsg="This is a child component" @is-child-mounted="childMounted = true"></child>
</div>

Leave a comment