一、父子組件的生命周期

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ù)問題的詳細內容，更多關于父子組件生命周期傳值的資料請關注腳本之家其它相關文章！

最新評論