1. 程式人生 > 程式設計 >Vue父元件監聽子元件生命週期

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 等都可以監聽。

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。