但是現在問題是父組件的數據是異步獲取的，而子組件一開始就會渲染，如果此時沒有傳入數據，而子組件又要用到數據中的length屬性時就會報錯：

怎么辦呢？最簡單的辦法就是讓子組件條件渲染，當有數據的時候才渲染，這樣就不會拋出錯誤了。

但是這還不夠完美，子組件一般不直接使用父組件傳來的值，二是監聽一下，然后有變化了的時候再賦值給data，渲染的時候用data里的數據，這樣就能保證隨時動態更新數據

props: ['floorGoods'],

data() {

return{

flGoods: {}

}

},

watch: {

floorGoods(val) {

this.flGoods = val;

console.log(val);

}

}

在一個方法就是在父組件里用Promise方法異步執行數據的賦值：

new Promise((resolve,reject) => {

if (res.status === 200){

resolve(res);

}

}).then((res) => {

this.category = res.data.data.category;

this.adBar = res.data.data.advertesPicture.PICTURE_ADDRESS;

this.bannerSwipePics = res.data.data.slides;

this.recommendGoods = res.data.data.recommend;

// 也可異步獲取再傳給子組件 Promise

this.floorSeafood = res.data.data.floor1;

this.floorBeverage = res.data.data.floor2;

this.floorFruits = res.data.data.floor3;

console.log(this.floorFruits);

this._initScroll();

})

}).catch(err => {

console.log(err);

});

這樣也是可以的，異步獲取數據導致的報錯的情況會在各個場景出現，比如根據數據渲染dom，而對dom有js操作的時候，會因為還沒渲染出來而找不到響應的dom元素報錯，這里可以用vue提供的$nextTick()函數，或者手動開個setTimeout定時器，延遲獲取；使用better-scroll的時候因為dom沒有渲染出來而無法獲取滾動元素的高度，導致無法滾動，同樣可以用vue提供的這個函數，等dom渲染完了后再初始化滾動。

總結

以上所述是小編給大家介紹的vue父組件異步獲取數據傳給子組件的方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！

總結

以上是生活随笔為你收集整理的vue 父组件获取接口值传到子组件_vue父组件异步获取数据传给子组件的方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。