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

2022-07-10 01:42:10 字數 553 閱讀 3749

這裡以 mounted 為例,在父元件 parent 和子元件 child 中,如果父元件監聽到子元件掛載 mounted 就做一些邏輯處理,可以通過以下寫法實現:

// parent.vue

// child.vue

mounted()

以上方法雖然可行,但每次都需要手動寫一次 $emit 觸發父元件的事件

更簡單的方式可以在父元件引用子元件時通過 @hook 來監聽生命週期

還是父元件 parent 和子元件 child,@hook 的寫法如下:

//  parent.vue

dosomething() ,

// child.vue

mounted(),

// 以上輸出順序為:

// 子元件觸發 mounted 鉤子函式 ...

// 父元件監聽到 mounted 鉤子函式 ...

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

vue中父元件如何監聽子元件值的變化

vue中我們會遇到很多父子元件通訊的需求,下面簡單列一下,父子元件通訊的幾種情況 1 父元件向子元件傳值 使用prop向子元件傳值 2 子元件實時監聽父元件傳來的值的變化 使用watch去監聽父元件傳來的值 3 父元件可以通過this.refs.name.去訪問子元件的值或方法 4 子元件可以通過t...

VUE父元件監聽子元件的生命週期

比如有父元件 parent 和子元件 child,如果父元件監聽到子元件掛載 mounted 就做一些邏輯處理,可以通過以下寫法實現 parent.vue dosomething child.vue mounted 這屬於手動通過 emit觸發父元件的事件,實現監聽生命週期的作用。簡單的方式可以在父...

父元件監聽子元件資料 Vue元件單向資料流

如果元件 中 data 裡的資料是固定的,那麼頁面上顯示的時候內容就是一樣的,而實際開發中,復用的元件裡顯示的內容往往是不同的,這就需要從父元件中傳遞不同的內容給子元件。一 prop的使用方法 上面 中,父元件以 article的形式傳值給子元件。子元件中用prop接收父元件傳的值 二 單向資料流 ...