Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Vue JS 2.0 Child Component Mounted Callback

I am making a form built of Vue JS components. I have the following components tree (each component contains the child below it ex. User Registration Form has the Form component as its direct child).

  1. User Registration Vue Component
  2. Form Vue Component
  3. Input Vue Component
  4. Input Option Component

After all of the components have full rendered I need to run a function in the User Registration. I tried putting it in the mounted function in the User Registration Vue Component but it runs before the Option Components have completed their mounted function.

I read here: https://medium.com/@brockreece/vue-parent-and-child-lifecycle-hooks-5d6236bd561f that this should not happen and that the child component should be completely mounted before the running the parent mounted function, in this situation the User Registration Vue Component.

I have about 100 components total including the Form, Inputs and all of the options.

I can only run this desired code in the User Registration Vue Component after everything has fully rendered and loaded. I tried using the jQuery(document).ready function but I have inconsistent results (sometimes the document is ready before the forms have fully mounted).

Any recommendations?

like image 855
likwidmonster Avatar asked Jun 01 '18 02:06

likwidmonster


People also ask

What is mounted () Vue JS?

May 11, 2020. The mounted() hook is the most commonly used lifecycle hook in Vue. Vue calls the mounted() hook when your component is added to the DOM. It is most often used to send an HTTP request to fetch data that the component will then render.

How do you access child components at Vue?

We can access the root Vue instance with $root , and the parent component with $parent . To access a child component from a parent, we can assign a ref with a name to the child component and then use this. $refs to access it.

How do you trigger event from parent to child component Vue?

Emitting Event from Parent to Child We can create a new Vue instance create an event bus and then pass the Vue instance to the child to listen to it. We have the Vue instance in the bus field. Then we can emit the loadMore event to send the event which listens to events from the bus .

What is $El in Vue?

The $el option in Vue provides Vue with an existing HTML element to mount the Vue instance generated using the new keyword. this. $el. querySelector is used to access HTML elements and modify the element's properties. this.


2 Answers

If you need to know when a component has been created, mounted, updated etc. from a parent component, you can just define a listener using @hook: followed by the lifecycle hook name.

E.g. from the parent component to execute doSomething() once the child component is mounted:

<child-component @hook:mounted="doSomething" />
like image 80
rd3n Avatar answered Oct 14 '22 06:10

rd3n


  1. Since the child mounting could be delayed more that nextTick(), you can emit an event programatically:

Child JS:

{
    mounted: function() {
        this.$emit("mounted");
    }
}

Parent HTML:

<child @mounted="childMounted">

Parent JS:

{
    methods: {
        childMounted: function() {
            // TODO child action
        }
    }
}
  1. An alternative is to use the child component as a mixin

  2. Define a directive:

    Vue.directive("mounted", {
        inserted: function(el, binding) {
            binding.value();
        }
    });
    

You don't need to modify the child, only the parent:

Parent HTML:

<child v-mounted="childMounted">

Parent JS same as in (2)

like image 30
Tires Avatar answered Oct 14 '22 08:10

Tires