vue父組件異步獲取數(shù)據(jù)傳給子組件的方法
但是現(xiàn)在問(wèn)題是父組件的數(shù)據(jù)是異步獲取的，而子組件一開(kāi)始就會(huì)渲染，如果此時(shí)沒(méi)有傳入數(shù)據(jù)，而子組件又要用到數(shù)據(jù)中的length屬性時(shí)就會(huì)報(bào)錯(cuò)：
怎么辦呢？最簡(jiǎn)單的辦法就是讓子組件條件渲染，當(dāng)有數(shù)據(jù)的時(shí)候才渲染，這樣就不會(huì)拋出錯(cuò)誤了。
但是這還不夠完美，子組件一般不直接使用父組件傳來(lái)的值，二是監(jiān)聽(tīng)一下，然后有變化了的時(shí)候再賦值給data，渲染的時(shí)候用data里的數(shù)據(jù)，這樣就能保證隨時(shí)動(dòng)態(tài)更新數(shù)據(jù)
props: ['floorGoods'],
data() {
return{
flGoods: {}
}
},
watch: {
floorGoods(val) {
this.flGoods = val;
console.log(val);
}
}
在一個(gè)方法就是在父組件里用Promise方法異步執(zhí)行數(shù)據(jù)的賦值：
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);
});
這樣也是可以的，異步獲取數(shù)據(jù)導(dǎo)致的報(bào)錯(cuò)的情況會(huì)在各個(gè)場(chǎng)景出現(xiàn)，比如根據(jù)數(shù)據(jù)渲染dom，而對(duì)dom有js操作的時(shí)候，會(huì)因?yàn)檫€沒(méi)渲染出來(lái)而找不到響應(yīng)的dom元素報(bào)錯(cuò)，這里可以用vue提供的$nextTick()函數(shù)，或者手動(dòng)開(kāi)個(gè)setTimeout定時(shí)器，延遲獲?。皇褂胋etter-scroll的時(shí)候因?yàn)閐om沒(méi)有渲染出來(lái)而無(wú)法獲取滾動(dòng)元素的高度，導(dǎo)致無(wú)法滾動(dòng)，同樣可以用vue提供的這個(gè)函數(shù)，等dom渲染完了后再初始化滾動(dòng)。
總結(jié)
以上所述是小編給大家介紹的vue父組件異步獲取數(shù)據(jù)傳給子組件的方法，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
- vue父組件中獲取子組件中的數(shù)據(jù)(實(shí)例講解)
- 詳解VUE里子組件如何獲取父組件動(dòng)態(tài)變化的值
- Vue父組件如何獲取子組件中的變量
- vue 父組件通過(guò)$refs獲取子組件的值和方法詳解
- vue.js 子組件無(wú)法獲取父組件store值的解決方式
- vue實(shí)現(xiàn)父組件獲取子組件的方法或?qū)傩灾翟斀?/a>
- vue子組件如何獲取父組件的內(nèi)容(props屬性)
- vue中實(shí)現(xiàn)子組件接收父組件方法并獲取返回值
- vue子組件獲取到它父組件數(shù)據(jù)的4種方法
- VUE父組件異步獲取數(shù)據(jù),子組件接收的值為空的問(wèn)題
- vue父組件異步如何獲取數(shù)據(jù)傳給子組件
- vue3父組件使用ref獲取子組件的屬性和方法
- vue子組件實(shí)時(shí)獲取父組件的數(shù)據(jù)實(shí)現(xiàn)
相關(guān)文章
html-webpack-plugin修改頁(yè)面的title的方法
這篇文章主要介紹了html-webpack-plugin修改頁(yè)面的title的方法 ，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
今天小編就為大家分享一篇Vue調(diào)用后端java接口的實(shí)例代碼，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-10-10
這篇文章主要介紹了Vue中rules的寫法使用小結(jié),本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-01-01
這篇文章主要介紹了Vue中$attrs與$listeners的使用詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-11-11
公司最近有這么個(gè)需求,在線預(yù)覽pdf功能,正好有點(diǎn)時(shí)間,稍微整理記錄一下,這篇文章主要給大家介紹了關(guān)于前端預(yù)覽pdf文件流的相關(guān)資料,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了vue中的文本空格占位符說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
在 Vue 3 中,覆蓋組件樣式的方法與 Vue 2 相似,但由于 Vue 3 更多地依賴于 CSS 的模塊化,一些最佳實(shí)踐可能會(huì)有所不同,下面就跟隨小編一起來(lái)了解一下吧2024-04-04
本文主要介紹了vue3使用el-tooltip插槽達(dá)到換行效果,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-08-08
本篇文章主要介紹了vue模擬加載更多功能（數(shù)據(jù)追加），小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-06-06
map()函數(shù)是在JS的數(shù)組中定義的,它返回一個(gè)新的數(shù)組,下面這篇文章主要給大家介紹了關(guān)于vue中map()快速使用的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12