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