驴友网——ajax获取动态首页数据以及学习将父组件的数据传递给子组件

详见教程7-8
这里我们使用axios方法来获取数据，我们只需要在首页发送一个ajax请求即可
我们在声明周期函数mounted（）{} 里面发送ajax请求。
1.在项目的static中可以存放模拟的数据
2，访问转发机制
使用场景，为了不在开发过程中更改借口，我们可以把外部给我吗传递过来的数据转在本地的static文件。

//这里的代码是难点
proxyTable: {
‘/api’: {
target: ‘http://localhost:8080’,
pathRewrite: {
‘^/api’: ‘/static/mock’
}
}
},

2.如何将ajax获取的数据传递到每个子组件

详见教程7-9
2.1 在home页创建一个数据data，存储需要用ajax获取的各种数据。
（1）将city传递给home-header这个组件

//home.vue
<template>
    <div>
        <home-header :city="city"></home-header> //将city这个数据传递给home-header
        <home-swiper></home-swiper>
        <home-icons></home-icons>
        <home-recommend></home-recommend>
        <home-weekend></home-weekend>
        <div>test</div>
    </div>
</template>

（2）在子组件home-header中接受这个数据
在home-header中定义props这个对象，用来定义需要从父组件接收的数据，并且规定其接收类型。

//header.vue
<script>
export default {
  name: 'HomeHeader',
  props: {
    city: string   //在这里定义需要从父组件接受的数据是变量city，并且数据类型是string
  }
}
</script>

（3）在子组件中使用这个数据，使用双括号+this

<template>
<span class="iconfont">&#xe638;</span>
        输入城市/景点/游玩主题</div>
        <div class="header-right">{{this.city}}<span class="sanjiao"></span></div>
</template>

3.如何获取ajax的的内容

  methods: {
    getHomeInfo () {
      axios.get('/api/index.json')
        .then(this.getHomeInfoSucc)
    },
    getHomeInfoSucc (res) {
      res = res.data //通过这个res.data可以获取到后端传给前端的数据文件中的所有内容，
      if (res.ret && res.data) { //这里的.data获取的是传过来的json文件中定义的data变量
        const data = res.data
        this.city = data.city
      }
      console.log(res)
    }
  },

注：注意在开发的时候逻辑代码尽量写在computed（）里面。
答题思路就是上面所述，当前记载大概要点，后续会补充。