Vue父組件監(jiān)聽子組件生命周期
更新時間：2020年09月03日 10:21:53 作者：vickylinj
這篇文章主要介紹了Vue父組件監(jiān)聽子組件生命周期,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
比如有父組件 Parent 和子組件 Child，如果父組件監(jiān)聽到子組件掛載 mounted 就做一些邏輯處理，可以通過以下寫法實現(xiàn)：
// Parent.vue
<Child @mounted="doSomething"/>
// Child.vue
mounted() {
this.$emit("mounted");
}
以上需要手動通過 $emit 觸發(fā)父組件的事件，更簡單的方式可以在父組件引用子組件時通過 @hook 來監(jiān)聽即可，如下所示：
// Parent.vue
<Child @hook:mounted="doSomething" ></Child>
doSomething() {
console.log('父組件監(jiān)聽到 mounted 鉤子函數(shù) ...');
},
// Child.vue
mounted(){
console.log('子組件觸發(fā) mounted 鉤子函數(shù) ...');
},
// 以上輸出順序為：
// 子組件觸發(fā) mounted 鉤子函數(shù) ...
// 父組件監(jiān)聽到 mounted 鉤子函數(shù) ...
當然 @hook 方法不僅僅是可以監(jiān)聽 mounted，其它的生命周期事件，例如：created，updated 等都可以監(jiān)聽。
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要為大家詳細介紹了vue項目實現(xiàn)圖片上傳功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-12-12
Vuex 作為一個老牌 Vue 狀態(tài)管理庫，大家都很熟悉了，Pinia 是 Vue.js 團隊成員專門為 Vue 開發(fā)的一個全新的狀態(tài)管理庫，本文就來講講它的具體使用吧2023-04-04
這篇文章主要介紹了vue項目build打包后部分樣式錯亂的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
解決vue props傳Array/Object類型值,子組件報錯的情況
這篇文章主要介紹了解決vue props傳Array/Object類型值,子組件報錯的情況，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要給大家介紹了關于前端vue播放m3u8、flv、mp4視頻的方法,隨著前端大屏頁面的逐漸壯大,客戶的需求也越來越多,大屏上面展示的事物也越來越豐富,需要的朋友可以參考下2023-07-07
這篇文章主要介紹了Vue指令之v-for的使用說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
本文主要介紹了vue3 setup點擊跳轉頁面的實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2023-10-10
這篇文章主要為大家介紹了vue3學習筆記簡單封裝axios示例實現(xiàn)，2022-06-06
這篇文章主要介紹了vue和react中關于插槽詳解，slot插槽是Vue對組件嵌套這種擴展機制的稱謂，在react可以也這樣稱呼，但是并不很常見。不過叫slot確實很形象2022-08-08
本文通過實例代碼給介紹了vue使用自定義組件實現(xiàn)通訊錄功能,需要的朋友可以參考下2018-09-09