但是現在問題是父組件的數據是異步獲取的，而子組件一開始就會渲染，如果此時沒有傳入數據，而子組件又要用到數據中的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;// 也可異步獲取再傳給子組件 Promisethis.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父組件異步獲取數據傳給子組件的方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
