The parent component listens to the lifecycle of a child component

Time:2020-11-25

If the parent component is listening to the child component mountmountedDo some logical processing

1. Useonand”>On and emit

Sub componentsemittouchhairOneindividualmatterpiece,fathergrouppiece”>emittouchhairOneindividualmatterpiecefathergrouppieceEmit triggers an event, and the parent component on listens for the corresponding event.

// Parent.vue


// Child.vue
mounted() {
  this.$emit("mounted");
}

2. Hook function

This is a particularly simple way. The child component does not need any processing, and only needs to pass through the parent component reference@hookThe code is rewritten as follows:

//  Parent.vue


doSomething() {
   console.log ('parent component listens to mounted hook function... ');
},
    
//  Child.vue
mounted(){
   console.log ('child component triggers mounted hook function... ');
},    
    
//The output sequence is as follows:
//Subcomponent triggers mounted hook function
//Parent component listening to mounted hook function