版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/soulwyb/article/details/88867412
没啥内容 就是把之前首页的数据获取重新做了一遍。直接上代码
1. 通过axios获取数据:
//City.vue
<script>
import axios from 'axios'
import CityHeader from './components/Header'
import CitySearch from './components/Search'
import CityList from './components/List'
import CityAlphabet from './components/Alphabet'
export default {
name: 'City',
components: {
CityHeader,
CitySearch,
CityList,
CityAlphabet
},
data () {
return {
cities: {},
hotCities: []
}
},
methods: {
getCityInfo () {
axios.get('/api/city.json')
.then(this.handleGetCityInfoSucc)
},
handleGetCityInfoSucc (res) {
res = res.data
if (res.ret && res.data) {
const data = res.data
this.cities = data.cities
this.hotCities = data.hotCities
}
}
},
mounted () {
this.getCityInfo()
}
}
</script>
2. 将数据传递给子组件:
//City.vue
<template>
<div>
<city-header></city-header>
<city-search></city-search>
<city-list :cities = "cities" :hot = "hotCities"></city-list>
<city-alphabet :cities="cities"></city-alphabet>
</div>
</template>
3.子组件获取数据后进行迭代显示到页面上
//CityList
//只包括这篇讲的AJAX数据接收 不包括之前的那个better-scroll
<script>
export default {
name: 'CityList',
props: {
hot: Array,
cities: Object
}
}
</script>
<div class="area" v-for="(item, key) of cities" :key="key">
<div class="title border-topbottom">{{key}}</div>
<div class="item-list" v-for="innerItem of item" :key="innerItem.id">
<div class="item border-bottom">{{innerItem.name}}</div>
</div>
//CityAlphabet
<template>
<ul class="list">
<li class="item" v-for="(item, key) of cities" :key="key">{{key}}</li>
</ul>
</template>
<script>
export default {
name: 'CityAlphabet',
props: {
cities: Object
}
}
</script>
没了 。 嗯。。搜索框 教程没讲 马丹