How to check if child component is mounted in vue?

Question

I want to check if child component is mounted and I want to move that information to he parent component. For this I am using emits. So with example here is my parent component:

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

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

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

and in child component, I am changing 'is-child-mounted' to true:

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

But still if (this.childMounted) comes false. So how can I check in parent component if the child component is mounted?

`` is enough. How would it be `false`, not really feasible. Interesting links: https://stackoverflow.com/a/44319825/8816585 and that one too: https://stackoverflow.com/a/67535239/8816585 — kissu, Nov 09 '22 at 13:44
mounted code only runs once (at mount time). and parent and child mounted code does not run at the same time. move the `if (this.childMounted)` code in your parent to a [method](https://vuejs.org/api/options-state.html#methods) — yoduh, Nov 09 '22 at 13:48
Okay I moved it to method: isChildReady() { if (this.childMounted) { //do something } }, and then in mounted I called this function: this.isChildReady() but still comes false — World's famous people, Nov 09 '22 at 13:50
Please update your question rather + be more explicit regarding "comes wrong". My comment doesn't work for you? Do you see something in your Vue devtools regarding the emit? — kissu, Nov 09 '22 at 13:51
I tried to find supporting evidence in the documentation, but a member of the Vue core team did once outline in a forum thread the order of components mounting: [child mounted() runs first, then parent mounted()](https://forum.vuejs.org/t/order-of-lifecycle-hooks-for-parent-and-child/6681). so there's not a real need to check for it. if you are in the parent mounted hook, you can be guaranteed that the child has already mounted at that point. — yoduh, Nov 09 '22 at 13:55
A parent `mounted` executes after all child `mounted` have executed. Therefore, you don't need anything on the child component. All you need is to execute the code you want executed *"when the child has mounted"* inside the parent's `mounted`. See [this comment](https://forum.vuejs.org/t/order-of-lifecycle-hooks-for-parent-and-child/6681) of LinusBorg, or [this post](https://medium.com/@brockreece/vue-parent-and-child-lifecycle-hooks-5d6236bd561f). — tao, Nov 09 '22 at 13:56
If `this.childMounted` is still false in parent `mounted` it means you have a typo somewhere and your emit is not actually working. But it is guaranteed the child has mounted. If you need more help please provide a *runnable* [mcve] and explain in clear what you want to achieve. — tao, Nov 09 '22 at 14:04

GeorgesA · Answer 1 · 2022-11-09T14:26:33.500

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:

edited Nov 09 '22 at 14:26

answered Nov 09 '22 at 14:08

GeorgesA

320
2
9

2

This is certainly redundant for the reasons explained in comments, a child is guaranteed to be mounted when a parent is mounted, at least when there's no suspense. But the references are appreciated. – Estus Flask Nov 09 '22 at 14:46

score 0 · Answer 2 · answered Nov 09 '22 at 16:35

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>

How to check if child component is mounted in vue?

2 Answers2