一、父子組件的生命周期

1.普通父子組件：

父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted

2.爺組件Y、父組件F、子組件Z

其中父組件為component(:is="")寫法，

子組件為按需引入寫法 

switch(this.pos){
    case enums.top:
        return ()=> import("./top.vue")
    default:
        return ()=>import("./default.vue")
}

生命周期：

爺beforeCreate-爺created->爺beforeMount->父beforeCreate->父created->父beforeMount->父mounted->爺mounted->子beforeCreate->子created->子beforeMount->子mounted

二、父傳子props數(shù)據(jù)問題分析

1.異步數(shù)據(jù)問題 在子組件的created和mounted打印不到最新的props 

如父組件傳過來的數(shù)據(jù)是created中請求接口獲取的，走到父created遇見請求接口的異步任務，會將其放到一個任務隊列，繼續(xù)執(zhí)行生命周期（生命周期是同步的）鉤子，執(zhí)行到子組件的created和mounted，還沒開始請求接口當然打印不到最新的數(shù)據(jù),只能打印到父組件在data中定義的該數(shù)據(jù)

注意：如果在created中有await語法則await之后的代碼塊同樣的也會被放入任務隊列，先執(zhí)行子組件的生命周期，子掛載后再執(zhí)行父mounted中的同步代碼，等所有同步任務執(zhí)行完再執(zhí)行await的異步及await之后的代碼塊

2.同步數(shù)據(jù) 父組件在data定義的數(shù)據(jù)或執(zhí)行到子created前父組件生命周期中的同步數(shù)據(jù)

同步數(shù)據(jù)可以在子組件的created中直接打印處理

三、子組件渲染及如何處理父組件的異步數(shù)據(jù) 

1.無需在子組件中進行處理的數(shù)據(jù)

如父傳遞的數(shù)據(jù)無需特別處理，不論該數(shù)據(jù)是同步異步，都可用來展示，因為vue是響應式的即使異步數(shù)據(jù)等數(shù)據(jù)更新后頁面后自動刷新的，不過若為異步數(shù)據(jù)在子的created里打印不到最新的，不過為什莫要打印呢哈哈

2.子對接受的父數(shù)據(jù)需要處理

同步：可直接在created寫方法進行處理

異步：

方案一：watch 監(jiān)聽到傳來的新數(shù)據(jù)時通過方法進行處理

方案二：在父組件添加v-if 如下,請求接口后 給list賦值，通過list的長度判斷是否展示模塊

這樣就可以確保子組件執(zhí)行created值一定是接口的值然后再進行處理，相當于把數(shù)據(jù)變成同步的了

topModule(v-if="list.length")
data(){
    return {
        list:[]   
     }
}

以上就是父子組件生命周期及子組件獲取數(shù)據(jù)問題的詳細內(nèi)容，更多關(guān)于父子組件生命周期傳值的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論