vue使用ajax获取数据

home.vue 父组件往子组件传值，先绑定，后props：【】

<template>
  <div>
		<home-header></home-header>
		<home-swiper :swiperList="swiperList"></home-swiper>
		<home-icons></home-icons>
		<home-recommend></home-recommend>
		<home-weekend></home-weekend>
	</div>
</template>

<script>
import HomeHeader from './components/Header'
import HomeSwiper from './components/Swiper'
import HomeIcons from './components/icon'
import HomeRecommend from './components/Recommend.vue'
import HomeWeekend from './components/Weekend.vue'
import axios from 'axios'
export default {
  name: 'Home',
	components:{
		HomeHeader,
		HomeSwiper,
		HomeIcons,
		HomeRecommend,
		HomeWeekend
	},
	data(){
		return{
			swiperList:[]
		}
	},
	methods:{
		swiperInfo(){
			axios.get('/api/index.json')
			.then(this.Succ)
			},
		Succ(res){
			res=res.data
			if(res.ret&&res.data){
				const data=res.data
				this.swiperList=data.swiperList
			}
		}
		},
	mounted(){
		this.swiperInfo()
	}
}
</script>

<style scoped>

</style>

swiper.vue

<template>
	<div class="wrapper">
	  <swiper :options="swiperOption">
		<!-- slides -->
		<swiper-slide v-for="item in swiperList" :key=item.id>
			<img class="wrapper-img" :src="item.imgUrl">
		</swiper-slide>
		<!-- Optional controls -->
		<div class="swiper-pagination"  slot="pagination"></div>
	  </swiper>
	</div>
</template>

<script>
  export default {
    name: 'HomeSwiper',
		props: {
		  swiperList: Array
		},
    data() {
      return {
        swiperOption: {
			pagination:'.swiper-pagination',
			loop:true
		}
      }
    }
  }
</script>
<style lang="stylus" scoped>
	.wrapper >>> .swiper-pagination-bullet-active
		background:#fff !important
	.wrapper-img
		width:100%
		height:3rem
</style>