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

深藏阁楼爱情的钟 2021-07-24 17:58 441阅读 0赞

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

问题：父组件的在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>
    
    
    <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>