自学vue 之使用axios获取ajax数据请求和首页父子组件数据传递部分笔记

使用axios获取ajax数据请求：

首先还是线上创建分支 git pull 拉到本地，并 git checkout index-ajax 切换到该分支，运行命令 npm install axios -- save 安装 axios 依赖包，在首页home.vue组件中引入 axios ，引入代码如下：

注意事项：

（1）axios.get 数据的index.json路径需要放置于static（静态文件放置文件夹）/mock文件下才能访问，而模拟数据一般不提交到线上，所以需要在.gitignore 中加入static/mock，则该文件内容不会被提交到线上或本地

（2）同样，直接访问路径'/static/mock/index.json'是不可取的的，需要在上图左边第二个文件config下的index.js中proxyTable设置代理路径，如下图所示；则代理路径'/api/index.json'就相当于'static/mock/index.json'，就可以进行访问啦~

首页父子组件数据传递：

在首页父组件home.vue代码如下：

<template>
    <div>
      <!--data数据中的返回值通过属性的形式传给子组件-->
      <home-header :city="city"></home-header>
      <home-swiper :list="swiperList"></home-swiper>
      <home-icons :list="iconList"></home-icons>
      <home-recommend :list="recommendList"></home-recommend>
      <home-weekend :list="weekendList"></home-weekend>
    </div>
</template>

<script>
import HomeHeader from './components/Header'
import HomeSwiper from './components/Swiper'
import HomeIcons from './components/Icons'
import HomeRecommend from './components/Recommend'
import HomeWeekend from './components/Weekend'
import axios from 'axios'   //引入 axios
export default {
  name: 'Home',
  components: {
    HomeHeader,
    HomeSwiper,
    HomeIcons,
    HomeRecommend,
    HomeWeekend
  },
  data () {          //父组件添加data数据
    return {
      city: '',
      swiperList: [],
      iconList: [],
      recommendList: [],
      weekendList: []
    }
  },
  methods: {                  //使用axios 发送ajax数据请求
    getHomeInfo () {
      axios.get('/api/index.json')
        .then(this.getHomeInfoSucc)
    },
    getHomeInfoSucc (res) {
      res = res.data
      if (res.ret && res.data) {    //判断ajax请求数据，并进行相应数据渲染（赋值）
        const data = res.data
        this.city = data.city
        this.swiperList = data.swiperList
        this.iconList = data.iconList
        this.recommendList = data.recommendList
        this.weekendList = data.weekendList
      }
    }
  },
  mounted () {
    this.getHomeInfo()
  }
}
</script>

子组件接收数据代码如下：

注意事项：

（1）子组件通过 props 接收父组件传输的数据内容再将对应子组件的数据进行取值修改

（2）在swiper子组件中，为防止轮播图默认不是第一个图片显示，加入computed计算属性showSwiper并加在相应位
置

（3）为解决轮播图不自动滚动：将autoplay属性： false ；loop： true 的效果是无缝轮播

最后，在home.vue组件中将获取的ajax数据取出，渲染即可~

自学vue 之使用axios获取ajax数据请求和首页父子组件数据传递部分笔记

猜你喜欢