vue字父组件传递数据

Question

父组件 index.vue

 <template>
  <div>
    <HomeHeader :city="city"></HomeHeader>
    <HomeBanner :bannerList="swiperList"></HomeBanner>
    <HomeIcon :list="iconList"></HomeIcon>
    <Recommed></Recommed>
    <Weekend></Weekend>
  </div>
</template>

<script>
import HomeHeader from '@/components/header'
import HomeBanner from '@/components/swiper'
import HomeIcon from '@/components/icons'
import Recommed from '@/components/Recommend'
import Weekend from '@/components/Weekend'
import axios from 'axios'
export default {
  data () {
    return {
      city: '',
      swiperList: [],
      iconList: []
    }
  },
  components: {
    HomeHeader,
    HomeBanner,
    HomeIcon,
    Recommed,
    Weekend
  },
  methods: {
    getHomeInfo () {
      axios.get('/api/index.json')
        .then(this.getHomeInfoSucc)
    },
    getHomeInfoSucc (res) {
      res = res.data
      if (res.ret && res.data) {
        const data = res.data
        this.city = data.city
        this.swiperList = data.swiperList
        this.iconList = data.iconList
        console.log(this.iconList)
      }
    }
  },
  created () {
    this.getHomeInfo()
  }
}
</script>

<style>
* {
  touch-action: pan-y;
}
address,
cite,
dfn,
em,
i,
optgroup,
var {
  font-style: normal;
}
</style>

打印console.log(this.iconList)数据也能获取到，但是在组件中打印
console.log(this.list)显示是个空的数组，

子组件 icon.vue

<template>
  <div class="icons">
    <swiper>
      <swiper-slide>
        <div class="icon" v-for="(item,index) in secondSlide" :key="index">
          <div class="icon-img">
            <img class="icon-imgs" :src="item.imgUrl">
          </div>
          <p class="icon-desc">{{item.desc}}</p>
        </div>
      </swiper-slide>
      <swiper-slide>
        <div class="icon" v-for="(item,index) in firstSlide" :key="index">
          <div class="icon-img">
            <img class="icon-imgs" :src="item.imgUrl">
          </div>
          <p class="icon-desc">{{item.desc}}</p>
        </div>
      </swiper-slide>
    </swiper>
  </div>
</template>
<script>
export default {
  props: {
    list: Array
  },
  data () {
    return {
      firstSlide: [],
      secondSlide: []
    }
  },
  mounted () {
    console.log(this.list)
    this.list.forEach((item, index) => {
      if (index >= 8) {
        this.firstSlide.push(item)
      } else {
        this.secondSlide.push(item)
      }
    })
  }
}
</script>

<style scoped>
.icons {
  overflow: hidden;
  height: 0;
  padding-bottom: 50%;
  margin-top: 11px;
}
.icons .swiper-slide {
  height: 0;
  padding-bottom: 50%;
}
.icon {
  position: relative;
  overflow: hidden;
  width: 25%;
  height: 0;
  float: left;
  padding-bottom: 25%;
}
.icon-img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 22px;
}
.icon-imgs {
  height: 100%;
  display: block;
  margin: 0 auto;
}
.icon-desc {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 22px;
  line-height: 22px;
  color: #333;
  text-align: center;
}
</style>

现在的效果

应该有的效果

一直在线，随时可回复，挺着急的

Answer 1

watch: {
    list: {
        handler(val) {
            val.forEach((item, index) => {
                if (index >= 8) {
                    this.firstSlide.push(item)
                } else {
                    this.secondSlide.push(item)
                }
            })
        },
        immediate: true
    }
}

Answer 2

只是异步请求数据的话，用v-if 控制子组件的渲染更简单些

<HomeIcon v-if="show" :list="iconList"></HomeIcon>
...
data(){
    return {
      show:false
    }
},
methods: {
    getHomeInfo () {
        this.show=false;
        
      axios.get('/api/index.json')
        .then(this.getHomeInfoSucc)
    },
    getHomeInfoSucc (res) {
      res = res.data
      if (res.ret && res.data) {
        const data = res.data
        this.city = data.city
        this.swiperList = data.swiperList
        this.iconList = data.iconList
        console.log(this.iconList)
        
        this.show=true;
      }
    }
  }