（Vue爬坑）子组件的渲染时间比父组件的渲染时间快导致数据的问题

子组件的渲染时间比父组件的渲染时间快导致数据的问题

问题：父组件的在mounted钩子函数中拿接口的数据 ，然后渲染给子组件；因为子组件渲染的速度比父组件快，所以子组件的pros内的数据是空的
解决问题如下：

子组件页面》监听父组件传过来的数据
如果数据发生变化就渲染

父组件页面：

<template>
  <div class="index">
    <search-box></search-box>
    <image-swiper v-bind:lunboData="lunboList"></image-swiper>
    <icon-swiper></icon-swiper>
    <keep-alive>
      <card-list v-bind:ShopData="ShopList"></card-list>
    </keep-alive>
    <tar-bar></tar-bar>
  </div>
</template>

<script>
import SearchBox from "@/components/SearchBox";
import ImageSwiper from "@/components/ImageSwiper";
import IconSwiper from "@/components/IconSwiper";
import CardList from "@/components/CardList";
import TarBar from "@/components/TarBar";
export default {
  name: "index",
  components: { SearchBox, TarBar, ImageSwiper, IconSwiper, CardList},
  data() {
    return {
      msg: "商品index首页",
      lunboList:[],
      ShopList:[]
    };
  },
  created() {
  },
  mounted() {
    this.$nextTick(()=>{
      console.log(11)
      // 拿到轮播图数据
      this.$Axios.get('http://localhost:4500/Rotation').then((res, rej) => {
        this.lunboList = res.data
      }).catch(err => {
        console.log(err)
      })

      // 拿到商品推荐数据
      this.$Axios.get('http://localhost:4500/ShopInformation').then((res, rej) => {
        this.ShopList = res.data
        console.log("这是主页面拿到的数据", this.ShopList)
      }).catch(err => {
        console.log(err)
      })
    })
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less">
  .index{
    height: 100%;
    overflow: hidden;
  }
</style>

子组件页面

<template>
  <div class="CardList">
    <div class="box" v-for="(item,index) in ShopList" v-on:click="ShopDetail(index)">
      <div class="left">
        <img :src=item.ShopPictures />
      </div>
      <div class="right">
        <div class="shopTitle"><span style="background-color: #FFFFFF;height: 20px;width:40px;"></span>{{item.ShopTItle}}</div>
        <div class="shopName">{{item.StoreName}}</div>
        <div class="shopRecord">
          <span v-for="(child_item,index) in item.ShopLabel" class="shopRecord_tip">{{child_item.text}}</span>
        </div>
        <div class="shopTip">
          <div class="shopTip_price">￥{{item.ShopPrice}}</div>
          <div class="shopTip_volume">已拼{{item.ShopSales}}件</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "CardList",
    props:["ShopData"],
    data() {
      return {
        msg:"主页商品列表栏"
    },
    methods:{
      ShopDetail:function(i){
        console.log(i)
        this.$router.push({
          name:'ShopDetail',
          params:{id:i}
        })
      }
    },
    watch:{
      ShopData(){
        console.log(this.ShopData,)
        this.ShopList = this.ShopData
        console.log("这是子页面拿到的数据",this.ShopList.ShopLabel)

        this.ShopList.forEach((item)=>{
          let arr =item.ShopLabel.split(",")
          console.log(item,arr)
          item.ShopLabel=[]
          arr.forEach((items)=>{
            item.ShopList.push({
              "text":items
            })
          })
        })
      }
    },
    mounted() {

    }
  }
</script>

<style lang="less">
  .CardList {
    margin-top: 10px;
    background-color: #FFFFFF;
    width: 100%;

    .box {
      padding: 10px;
      display: flex;

      .left>img {
        height: 200px;
        width: 200px;
      }

      .right {
        padding: 10px;
        width: 100%;

        .shopTitle {
          font-size: 20px;
          text-indent: 2rem;
          overflow: hidden;
          text-overflow: ellipsis;
          -webkit-box-orient: vertical;
          display: -webkit-box;
          -webkit-line-clamp: 2;
        }

        .shopName {
          color: gray;
        }

        .shopRecord {
          margin-top: 30px;
          .shopRecord_tip{
            margin-right: 10px;
          }
        }

        .shopTip {
          display: flex;
          align-items: center;

          .shopTip_price {
            color: red;
            font-size: 25px;
          }

          .shopTip_volume {
            margin-left: 20px;
            color: gray;
          }
        }
      }
    }
  }
</style>