VUE親コンポーネントが子コンポーネントのライフサイクルをリスニングする

たとえば、親コンポーネントParentと子コンポーネントChildがあり、親コンポーネントが子コンポーネントのマウントmountedを傍受している場合、いくつかの論理処理を行うには、次の方法で実現できます.

// Parent.vue
<Child @mounted="doSomething"/>
    
// Child.vue
mounted() {
     
  this.$emit("mounted");
}

これは、$emitによって親コンポーネントを手動でトリガーするイベントであり、ライフサイクルをリスニングする役割を果たします.以下に示すように、親コンポーネントがサブコンポーネントを参照するときに@hookで傍受すれば簡単です.

//  Parent.vue
<Child @hook:mounted="doSomething" ></Child>

doSomething() {
     
   console.log('       mounted      ...');
},
    
//  Child.vue
mounted(){
     
   console.log('      mounted      ...');
},    
    
//        ：
//       mounted      ...
//        mounted      ...     

もちろん@hookメソッドはmountedだけでなく、created、updatedなど、他のライフサイクルイベントも傍受できます.