Vue JS 2.0 子组件挂载回调

Question

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?

Answer 1

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.

Eg from the parent component to execute doSomething() once the child component is mounted:

<child-component @hook:mounted="doSomething" />

Answer 2

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
        }
    }
}

2. An alternative is to use the child component as a mixin

3. 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)

Answer 3

mounted() hook of the parent component does not guarantee that all child component also finish rendering.

To execute something once the whole view has been rendered use vm.nextTick() inside the the parent component's mounted() hook.

//User Registration Vue Component

  mounted(){
    this.$nextTick(()=>{
      //execute your code
      console.log('Finished rendering the complete view')
    })
  }

Refer to - mounted lifecycle hook

---

Answer 4

Thanks @Tires, it works well

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

Parent:

<child v-mounted="childMounted">

{
    methods: {
        childMounted: function() {
            // TODO child action
        }
    }
}