20181129——Vue中的axios

首先要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
}

猜你喜欢

转载自blog.csdn.net/qq_36344771/article/details/84639219
今日推荐