举个栗子,父组件
<template>
<div>
<Home-header></Home-header>
<Home-swiper :list="swiperList"></Home-swiper>
<Home-Icons :list="iconList"></Home-Icons>
<Home-recommend :list="recommendList"></Home-recommend>
<Home-weekend :list="weekendList"></Home-weekend>
</div>
</template>
<script>
import HomeHeader from './components/Header'
import HomeSwiper from './components/Swiper'
import HomeIcons from './components/Icons'
import HomeRecommend from './components/Recommend'
import HomeWeekend from './components/Weekend'
import axios from 'axios'
export default{
name: 'Home',
components: {
HomeHeader,
HomeSwiper,
HomeIcons,
HomeRecommend,
HomeWeekend
},
data () {
return {
lastCity: '',
swiperList: [],
iconList: [],
recommendList: [],
weekendList: []
}
},
methods: {
getHomeInfo () {
axios.get('/api/index.json')
.then(this.getHomeInfoSucc)
},
getHomeInfoSucc (res) {
res = res.data
if (res.ret && res.data) {
const data = res.data
this.swiperList = data.swiperList
this.iconList = data.iconList
this.recommendList = data.recommendList
this.weekendList = data.weekendList
}
}
},
mounted () {
this.getHomeInfo()
}
}
</script>
<style>
</style>
举个栗子,子组件
<template>
<div>
<div class="title">周末去哪儿</div>
<ul>
<li
class="item border-bottom"
v-for="item of list"
:key="item.id"
>
<div class="item-img-wrapper">
<img class="item-img" :src="item.imgUrl" />
</div>
<div class="item-info">
<p class="item-title">{{item.title}}</p>
<p class="item-desc">{{item.desc}}</p>
</div>
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'HomeWeekend',
props: {
list: Array
}
}
</script>
<style lang="stylus" scoped>
@import '~styles/mixins.styl'
.title
line-height: .8rem
background: #eee
text-indent: .2rem
.item-img-wrapper
overflow: hidden
height: 0
padding-bottom: 37.09%
.item-img
width: 100%
.item-info
padding: .1rem
.item-title
line-height: .54rem
font-size: .32rem
ellipsis()
.item-desc
line-height: .4rem
color: #ccc
ellipsis()
</style>
方便开发环境和正式环境切换接口示例
在config/index.js里
proxyTable: {
'/api': {
target: 'http://localhost:8080',
pathRewrite: {
'^/api': '/static/mock'
}
}
}
意思是当访问8080端口的时候,自动把/api替换成/static/mock
当正式环境时,切换回80端口,匹配到api对应的请求位置即可