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