详见教程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"></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()里面。
答题思路就是上面所述,当前记载大概要点,后续会补充。