1.安装Axios
npm intall axios
2.引入
import axios from 'axios'
3.使用
由于页面(页面也是一个组件)是由各个不同的功能组件组成的,例如下面这个页面:
各个组件都有自己的数据需要从服务器请求,在请求Home页面时,可以让各个页面分别发起ajax请求,但这样下来一个页面将会发起多个请求,导致页面性能降低。
因此,推荐一个页面仅由承载该页面的父组件发送一个ajax请求,再通过父组件给子组件传值的方式将数据传递给子组件。
我们在父组件的mounted生命周期钩子中调用发起请求的方法:
mounted(){
this.getHomeInfo();
},
methods:{
getHomeInfo:function(){
axios.get('/static/mock/data.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;
this.recommendList = data.recommendList;
}
}
}
获取到数据后,先将数据保存在父组件的data中,再传递给子组件:
Home.vue 的template
<template>
<div>
<home-header :city="city"></home-header>
<home-swiper :swiperList="swiperList"></home-swiper>
<home-icons :iconList="iconList"></home-icons>
<home-recommend :recommendList="recommendList"></home-recommend>
</div>
</template>
以子组件HomeHeader.vue为例演示接受数据:
<script>
export default {
props:{
city:String
},
name:'HomeHeader',
}
</script>
4.优化
在渲染HomeSwiper组件时,出现了一些小bug:幻灯片默认首先会停留在最后一页。这是因为当我们使用swiper组件时,在获取ajax数据之前,swiper接受的数据是父组件传过来的空数组。
这样解决:等真正的数据传过来之后swiper才被创建。
<swiper ref="mySwiper" :options="swiperOption" v-if="showSwiper">