坑:vue2在props時僅接受第一次返回數據的解決辦法

今天在做項目時遇到了一個bug,在列表頁進入詳情頁時帶入list以便子組件遍歷使用,使用props傳參,該list在父組件由created生命週期函數訪問接口獲取,然後子組件在使用時,直接使用props接收並調用,大概代碼如下:

// 父組件

<Child :list='list' />

...
created(){
getListApi().then(list=>{
  this.list = list
})
}

//

...
props:{
list:{
type:Array,
default:()=>[]
}
},

methods:{
loadList(){
// 遍歷list以獲取對應的name
}
}

遇到了一個問題:當返回到上一頁也就是列表頁的時候,子組件的的值渲染值並不是遍歷得到的那個值,而是它的初值,但假如我手速夠快返回的就正常了
經過一番捫心自問+關愛後得到了答案:

  1. 父組件的created在生命週期裏只會執行一遍,但當我從下一頁回退回來的時候,整個生命週期會被重新執行,這一點沒有問題,問題在於使用props的傳參方式
    props的方式傳遞給子組件,子組件只會接收一次,也就是說,假設第一次傳遞給子組件的是一個有長度的list是經過異步請求後的結果,那如果在未來得及請求接口的情況下(也就是手速夠快),傳遞給子組件的就是[],而子組件的props僅接收來自父組件的第一次數據,因而導致了上面的bug
    過程不必多說(委屈屈就對了),接下來看解決方案:

方案1:
基於props方式僅接收第一次傳遞數據的方式,可以使用watch + data結合的方式,即使用props接收數據值記作1,data重新定義這個數據值記作2,watch在接聽props1時重新將變化的值賦給data中的2,如此就可以解決這個問題

// 子組件

props:{
list:{
type:Array,
default:()=>[]
}
},
watch:{
list(n){
console.log(n)
console.log(this.myList) // 對比一下會發現,這是不一樣的!!!我真的好氣啊啊啊
this.myList = n  // 關鍵代碼 將變化後的值重新賦給myList ,具體業務場景下,也可以判斷如果有值再加 
}
},
data(){
return {
  myList:this.list
  }
}

方案2:
可以在父組件獲取到數據時就將數據存入到vuex中,這樣子組件在使用時就可以直接獲取到list,不必再考慮還會有初始值的問題,至於vuex的刷新會失效問題,只需要尋找一款對應的vuex插件就可以解決。

以上。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章