7-9#去哪儿网app#首页父子组件数据传递

Ajax的data里的数据是北京（index.json），

然后传给了Home.vue的data里的city：

getHomeInfoSucc(res) {
    res = res.data
    if (res.ret && res.data) {
        const data = res.data
        this.city = data.city
    }
    // console.log(res);
}  

然后又传给了子组件，子组件又接受了city

<home-header :city="city"></home-header>

{{this.city}}

 

props: {
    city: String
}

接下来是把ajax里的swiperlist数据传给组件，道理和刚刚的city一样。

设置好之后发现一个问题：首页默认的轮播图是最后一页，这是因为一开始数据还没有传递的时候，数组是空的，swiper是空数组

解决方案：添加v-if="list.length",但在模板里面尽量避免出现这种逻辑性的代码，所以改成在data里建立计算属性：

computed: {
	showSwiper () {
		return this.list.length
	}
}

则v-if改成：

<swiper :options="swiperOption" v-if="showSwiper">

Ajax获取好数据，就要改变子组件的内容（Home.vue是父组件，其他的是子组件？），在home.vue中：

this.city = data.city
this.swiperList = data.swiperList
this.iconList = data.iconList

其余组件的操作都一样：

在home的data创建空数组 => v-bind传给子组件 => 在对应子组件.vue中删去之前直接从网站引入的data => 增加props中数组类型Array => 修改v-for内容 => 回到home.vue中改变子组件内容this.XX = data.XX

最后检查网页，发现图标区域自动滚动，进行代码调整：

在icons.vue中的swiper标签中添加:options="swiperOption"，并在data中写定义即可

data () {
    return {
        swiperOption: {
            autoplay: false
        }      
    }       
},

最后确认没有问题就可以提交gitee并融入到master

git add .
git commit -m 'index finish'
git push
git checkout master
git merge index-ajax
git push