去哪儿的 源码 个人解析(1) axios
1.导入axios
import axios from 'axios'
2.直接在组件的 methods 中使用
methods: { getHomeInfo () { axios.get('/api/index.json?city=' + this.city) .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 } } },
axios.get('/api/index.json?city=' + this.city) 解释 数据存放的位置
修改各组件的<template>
<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>
返回数据设置为空
data () { return { lastCity: '', swiperList: [], iconList: [], recommendList: [], weekendList: [] } },
组件传数据,父组件传递给子组件
export default { name: 'HomeRecommend', props: { list: Array } }
props :父组件传递给子组件用到props
.
越努力越幸运