[JavaScript知识库]首页父子组组件间传值

首页父子组组件间传值

1)父组件通过属性传值

Home.vue

//建立data存储页面各种数据
data () {
        return{
            city:’’, //城市
            swiperList:[], //轮播图
            iconList:[],//热点Icon
            recommendList:[],//热销推荐
            weekendList:[],//周末去哪儿
        }
},
//修改methods,添加json数据绑定
methods:{
        getHomeInfo (){
            axios.get('/api/index.json').then(this.getHomeInfoSucc)
        },
        getHomeInfoSucc (res) {  
            res = res.data
            if(res.ret && res.data){
                const data = res.data
                //添加跟json数据绑定
                this.city = data.city //城市
                this.swiperList = data.swiperList //轮播图
                this.iconList = data.iconList //热点Ico
                this.recommendList = data.recommendList //热销推荐
                this.weekendList = data.weekendList //周末去哪儿
            }
        }
    },
//通过属性给子组件传值
<home-header :city="city"></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>

2)子组件通过props接收数据

Header.vue

props:{
        city:String //要区分大小写
    },
#元素内容修改
//元素内容的“城市”换成
{{this.city}}

Swiper.vue

设置完轮播图以后，因为一开始swiperList是一个空数组，所以渲染完以后显示的是数组最后一项。

给swiper标签设置v-if，里面传入swiperList数组的长度:一开始是空数组的时候它就不会被渲染，当它里面有东西了才被渲染，就可以解决这个问题了。

但是一般不在标签里写逻辑性代码，所以在computed里写一个showSweiper方法

//先去掉之前swiperList数组里的数据取而代之添加props
props:{
        list:Array
    },
//添加计算属性,解决轮播图默认显示为最后一张图的问题
computed: {
        showSweiper () {
            return this.list.length
        }
}
//添加计算属性方法:v-if=“showSweiper",解决轮播图默认显示为最后一张图的问题
<swiper :options="swiperOptions" v-if="showSweiper">
    //循环的v-for="item of swiperList" 替换成v-fo="item of list"
    <swiper-slide v-for="item of list" :key="item.id”>…</swiper-slide>
</swiper>

Icons.vue

//先去掉之前iconList数组里的数据取而代之添加props
props:{
        list:Array
    },
//修改计算属性里
computed:{
    pages(){
            const pages = []
            //修改this.iconlist.forEach为:this.list.forEach
            this.list.forEach((item,index) => {...}
}
#元素内容修改
//循环的v-for="item of iconList" 替换成v-fo="item of list"
<div class="icon" v-for="item of list" :key="item.id”>

Recommend.vue

//先去掉之前recommendList数组里的数据取而代之添加props
props:{
        list:Array 
    },
#元素内容修改
//循环的v-for="item of recommendList" 替换成v-fo="item of list"
<li class="item border-bottom" v-for="item of list" :key="item.id">

Weekend.vue

//先去掉之前weekendList数组里的数据取而代之添加props
props:{
        list:Array
    },
#元素内容修改
//循环的v-for="item of weekendList" 替换成v-fo="item of list"
<li class="item border-bottom" v-for="item of list" :key="item.id">