1. 程式人生 > 實用技巧 >父元件如何監聽子元件的生命週期?

父元件如何監聽子元件的生命週期?

比如有父元件 Parent 和子元件 Child,如果父元件監聽到子元件掛載 mounted 就做一些邏輯處理,可以通過以下寫法實現:

1 // Parent.vue
2 <Child @mounted="doSomething"/>
3 
4 // Child.vue
5 mounted() {
6   this.$emit("mounted");
7 }

以上需要手動通過 $emit 觸發父元件的事件,更簡單的方式可以在父元件引用子元件時通過 @hook 來監聽即可,如下所示:

 1 //  Parent.vue
 2 <Child @hook:mounted="doSomething" ></Child>
 3
4 doSomething() { 5 console.log('父元件監聽到 mounted 鉤子函式 ...'); 6 }, 7 8 // Child.vue 9 mounted(){ 10 console.log('子元件觸發 mounted 鉤子函式 ...'); 11 }, 12 13 // 以上輸出順序為: 14 // 子元件觸發 mounted 鉤子函式 ... 15 // 父元件監聽到 mounted 鉤子函式 ...

當然 @hook 方法不僅僅是可以監聽 mounted,其它的生命週期事件,例如:created,updated 等都可以監聽。