javascript - vue透過props傳遞物件會報錯

Question

父元件App.vue

#子元件sonCp.vue

資料結構

報錯但是資料能渲染上去

#求解，順便幫我看一下我取資料方式對麼，是放到created這個裡面麼

Answer 1

子元件最初得到的是空字串，木有.acount.name之類的屬性，所以出錯。

最簡單的解決方法：

父元件App.vue中的

<sonCp :dataObj="dataObj" />

改成：

<sonCp :dataObj="dataObj" v-if="dataObj" />

Answer 2

非同步請求的資料是會渲染兩次的！第一次是請求沒完成時，這時候obj是你回傳的''。然後子組件去取值，一定發生錯誤呀！第二次才是請求返回，然後才有資料。所以解決方式就很明顯了，有很多種解決方式。

Answer 3

初始時dataObj是空字符，所以傳到子組件一定會報錯，可以透過v-if判定下是否已取到數據，取到之後再進行渲染。

Answer 4

一、如樓上所述，在dom中透過v-if判斷dataObj.length，保證在有資料情況下的渲染(推薦！！)

二、提前在父元件data選項中設定好dataObj物件的資料結構，例如：

data() {
    return {
        dataObj: {
            id: '',
            account: {
                name: '',
                age: ''
            }
        }
      
    };
}

另外建議樓主盡量在data選項中預留初始項時選擇合適的資料類型賦默認值，例如父組件中dataObj要存放的是數組類型，盡量dataObj: []，這樣也語意表達上也明確。

Answer 5

雷雷