首先要import axios这个包
import axios from 'axios'
然后在mounted中定义一个方法
mounted() {
this.getCityInfo()
}
再在methods中定义这个方法getCityInfo
methods: {
getCityInfo() {
axios.get('api/city.json')
.then(this.handleGetCityInfoSucc)
}
}
再去定义这个handleGetCityInfoSucc这个方法
methods: {
handleGetCityInfoSucc(res) {
}
}
还要在data中定义两个数据
data () {
return {
cities:{},
hotCities:[]
}
}
重写handleGetCityInfoSucc函数
methods: {
handleGetCityInfoSucc(res) {
res =res.data
if(res.ret && res.data){
const data = res.data
this.cities= data.cities
this.hotCities=data.hotCities
}
}
}
然后去穿给子组件数组
<city-head :ciites='cities'></city-head>
相当于子组件就能接受到这个数据
子组件利用props接受数据
props: {
cities:Object
hotCities:Array
}