Can the Vue parent component monitor the life cycle of the child component?
For example, if there is a parent component Parent and a child component Child, if the parent component detects that the child component is mounted, it will do some logical processing. This can be achieved by writing as follows:
// Parent.vue
<Child @mounted="doSomething"/>
// Child.vue
mounted() {
this.$emit("mounted");
}
The above needs to manually trigger the event of the parent component through $emit. A simpler way is to listen through @hook when the parent component refers to the child component, as shown below:
// Parent.vue
<Child @hook:mounted="doSomething" ></Child>
doSomething() {
console.log('The parent component listens to the mounted hook function...');
},
// Child.vue
mounted (){
console.log('The child component triggers the mounted hook function...');
},
// The above output sequence is:
// The child component triggers the mounted hook function...
// The parent component listens to the mounted hook function. ..
Okay, if you have any questions you don’t understand, you can follow my personal WeChat official account and communicate with me.
Of course, the @hook method can not only listen to mounted, but also other life cycle events, such as created, updated, etc.