Vue2.5 旅游项目实例9 首页-首页父子组件间的传值

头部城市部分，在Home.vue页面添加代码： 

<home-header :city="city"></home-header>

<script>
export default {
  data () {
    return {
      city: '',
      swiperList: [],
      iconList: [],
      recommendList: [],
      weekendList: []
    }
  },
  methods: {
    getHomeInfoSucc (res) {
      res = res.data
      console.log(res)
      if (res.ret && res.data) {
        this.city = res.data.city
        this.swiperList = res.data.swiperList
        this.iconList = res.data.iconList
        this.recommendList = res.data.recommendList
        this.weekendList = res.data.weekendList
      }
    }
  }
}

然后Header.vue页进行接收：

<div class="header-right">{{this.city}} <i class="iconfont arrow-icon">&#xe64a;</i></div>

<script>
export default {
  name: 'HomeHeader',
  props: {
    city: String
  }
}
</script>

下面是Home.vue轮播：

<home-swiper :swiperList="swiperList"></home-swiper>

然后是Swiper.vue页：

export default {
  name: 'HomeSwiper',
  props: {
    swiperList: Array
  },
  data () {
    return {
      swiperOption: {
        pagination: '.swiper-pagination',
        loop: true // 循环
      }
    }
  }
}

但是有个问题，发现轮播默认显示的是第4张图片，这个是因为页面还没有获取Ajax数据的时候，swiper里面接收的数据是外部空数组swiperList，也就是说swiper最初创建的时候是通过空数组创建的，然后当Ajax数据获取完成后，swiperList变为真正的数据项，再传给HomeSwiper这个组件的时候，才会获取到新的数据，进行重新渲染。因为swiper的初始化创建是根据初始化创建的，所以会导致刚才的小问题，显示的是所有数据中的最后一个数据。

解决办法：在Swiper.vue添加代码：

<swiper :options="swiperOption" v-if="swiperList.length">

当传递过来的swiperList是个空数组，swiperList.length为false时，swiper不会被创建，只有等真正的数据过来了之后，swiper才会被创建。 

回到页面上刷新，发现轮播显示的是第一张了。

当然这样写不是很优雅，一般在模板中尽量不要出现逻辑性的代码，所以我们可以添加一个计算属性：

<swiper :options="swiperOption" v-if="showSwiper">

<script>
export default {
  computed: {
    showSwiper () {
      return this.swiperList.length
    }
  }
}
</script>

这样就可以了。

继续下面Home.vue的内容，就写一起了：

<home-icons :iconList="iconList"></home-icons>
<home-recommend :recommendList="recommendList"></home-recommend>
<home-weekend :weekendList="weekendList"></home-weekend>

Icons.vue

props: {
    iconList: Array
}

图标区域这里会自动左右滚动，我们不需要这里自动滚动，所以要给swiper加一个:options：

<swiper :options="swiperOption">

<script>
export default {
  data () {
    return {
      swiperOption: {
        autoplay: false
      }
    }
  }
}
</script>

Recommend.vue

props: {
    recommendList: Array
}

Weekend.vue

props: {
    weekendList: Array
}

完整效果图：

下面要提交代码：

git add .
git commit -m "完成首页功能"
git push

合并到master：

git checkout master
git merge index-axios
git push