vue父組件異步如何獲取數(shù)據(jù)傳給子組件

更新時(shí)間：2023年11月09日 09:49:21 作者：donggua_123

這篇文章主要介紹了vue父組件異步如何獲取數(shù)據(jù)傳給子組件問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

vue父組件異步獲取數(shù)據(jù)傳給子組件

最近一直在做一個(gè)vue移動端商城的實(shí)戰(zhàn)，期間遇到一個(gè)小小的問題，值得一說，可能別人已經(jīng)遇到過了，只是我第一次遇到而已。

首頁有個(gè)樓層區(qū)域，用于展示不同類別的商品，

比如：水果，衣服，酒水等，布局都是一樣的，所以將單個(gè)樓層獨(dú)立出來成一個(gè)組件，只需要給響應(yīng)的樓層傳入對應(yīng)的數(shù)據(jù)就可以按需渲染了：

先在父組件引入，并注冊樓層組件

 import Floor from '@/components/pages/common/Floor'

 components: {
      swiper,
      swiperSlide,
      Floor
    }

數(shù)據(jù)初始化

data() {
      return {
        locationIcon: require('../../assets/images/location.png'),
        bannerSwipePics: [],
        category: [],
        adBar: '',
        recommendGoods: [],
        swiperOptions: {
          slidesPerView: 3
        },
        floorSeafood: {},
        floorBeverage: {},
        floorFruits: {}
      }
    },

使用組件

<!--樓層-->
        <Floor :floorGoods='floorSeafood'></Floor>
        <Floor :floorGoods='floorBeverage'></Floor>
        <Floor :floorGoods='floorFruits'></Floor>

在子組件里進(jìn)行一下數(shù)據(jù)接收就行

props: ['floorGoods']

但是現(xiàn)在問題是父組件的數(shù)據(jù)是異步獲取的，而子組件一開始就會渲染，如果此時(shí)沒有傳入數(shù)據(jù)，而子組件又要用到數(shù)據(jù)中的length屬性時(shí)就會報(bào)錯(cuò)：

雖然頁面也能正常渲染，但是看到這個(gè)紅紅的報(bào)錯(cuò)提示就不爽！

怎么辦呢？最簡單的辦法就是讓子組件條件渲染，當(dāng)有數(shù)據(jù)的時(shí)候才渲染，這樣就不會拋出錯(cuò)誤了。

但是這還不夠完美，子組件一般不直接使用父組件傳來的值，二是監(jiān)聽一下，然后有變化了的時(shí)候再賦值給data，渲染的時(shí)候用data里的數(shù)據(jù)，這樣就能保證隨時(shí)動態(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ò)的情況會在各個(gè)場景出現(xiàn)，比如根據(jù)數(shù)據(jù)渲染dom，而對dom有js操作的時(shí)候，會因?yàn)檫€沒渲染出來而找不到響應(yīng)的dom元素報(bào)錯(cuò)，這里可以用vue提供的$nextTick()函數(shù)，或者手動開個(gè)setTimeout定時(shí)器，延遲獲??；

使用better-scroll的時(shí)候因?yàn)閐om沒有渲染出來而無法獲取滾動元素的高度，導(dǎo)致無法滾動，同樣可以用vue提供的這個(gè)函數(shù)，等dom渲染完了后再初始化滾動。