标签：isl ref 相关 通过 src 需要 rgba https lin
HomeSwiper是本项目的轮播图组件，它使用了两个现成的组件Swiper和SwiperItem，前者是对播放容器的设置，后者是对播放项目的设置。
我们直接使用Swiper组件，在其内部通过v-for动态创建若干个SwiperItem，每个SwiperItem都是一张超链接图片。需要展示的图片存放在数组banners中，它由父组件Home传入。
<swiper> <swiper-item v-for="(item, index) in banners" :key="index"> <a :href="item.link"> <img :src="item.image" alt="" @load="imgLoad"/> </a> </swiper-item> </swiper>
这里顺便复习一下父对子通信，在子组件的props选项中接受数据：
props: { banners: { type: Array, default(){ return [] } } }
在父组件模板中使用子组件时，通过属性绑定的方式发送数据：
<home-swiper :banners="banners" @swiperImageLoad="swiperImageLoad"></home-swiper>
此外，我们注意到在轮播图图片上设置了load事件监听，这是因为图片文件较大，加载较慢，所以当希望获取页面高度时，必须等到图片全部加载完成后再取值，否则会出现闪烁和抖动。所以，当子组件中图片全部加载完成时，要将这个消息告知父组件：
imgLoad(){ if(!this.isLoad){ this.$emit(‘swiperImageLoad‘) this.isLoad = true }
留意到轮播图的特点：图片数目的增加不会对页面高度造成影响，所以轮播图只需要加载完第一张，就可以向父组件通信了，这就是为什么上面代码中加了一层判断。
父组件收到消息后，会调用swiperImageLoad方法来执行一些操作，但具体内容就是关于其它组件的了。
轮播图下面的组件是RecommendView，它的实现与轮播图几乎完全相同，都是获取一个项目数组，然后遍历展示，只不过RecommendView中的图片是排成一行展示，且其下方有文字。RecommendView的展示内容为recommends数组，它同样由父组件传入。相关代码如下：
<div class="recommend"> <div v-for="(item, index) in recommends" :key="index" class="recommend-item"> <a :href="item.link"> <img :src="item.image" alt=""/> <div>{{item.title}}</div> </a> </div> </div>
<recommend-view :recommends="recommends"></recommend-view>
再下面是FeatureView组件，它甚至称不上是一个组件，就是一张简单的图片，连相关的js代码都没有，也没什么可说的。
<div class="feature"> <a href="https://act.mogujie.com/zzlx67"> <img src="~assets/img/home/recommend_bg.jpg" alt=""> </a> </div>
<feature-view></feature-view>
HomeSwiper、RecommendView和FeatureView组件的使用
标签：isl ref 相关 通过 src 需要 rgba https lin
原文地址：https://www.cnblogs.com/creationMarvel/p/14901611.html
