公共组件拆分(画廊组件)
vue项目开发中,有些组件不仅仅是一个页面需要使用,这时候我们可以将其抽离出来,作为一个公共组件。公共组件常用的目录结构如下(其中Gallery.vue就是公共组件):
Gallery.vue中的图片需要有轮播效果,故采用swiper,swiper中相关配置如下(详情参考swiper3官网):
在Gallery.vue组件中的轮播图片,需要使用v-for循环。而imgs是有父组件传过来的 ,在该组件中声明props接收,并在父组件中传递过来。
Gallery.vue
<template>
<div class="container" @click="handleGalleryClick">
<div class="wrapper">
<swiper :options="swiperOption">
<swiper-slide v-for="(item,index) in imgs" :key="index">
<img class="gallery-img"
:src="item">
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</div>
</div>
</template>
<script>
export default{
name: 'CommonGallery',
props:{
imgs:{
type:Array,
default () {
return []
}
}
},
data(){
return {
swiperOption: {
pagination: '.swiper-pagination',
// 分页器样式类型,可选bullets-圆点(默认),fraction-分式,progress-进度条,custom-自定义
paginationType: 'fraction',
// 启动动态检查器(OB/观众/观看者),当改变swiper的样式(例如隐藏/显示)或者修改swiper的子元素时,自动初始化swiper。默认false,不开启,可以使用update()方法更新。
observer:true,
// 将observe应用于Swiper的父元素。当Swiper的父元素变化时,例如window.resize,Swiper更新。
observeParents:true
}
}
},
methods:{
handleGalleryClick(){
this.$emit('close')
}
}
}
</script>
Banner.vue
<template>
<div>
<div class="banner" @click="handleGalleryClick">
<img class="banner-img"
src="http://img1.qunarzz.com/sight/p0/1607/7c/7cda8b6782dabd80b4.img.jpg_600x330_8572a930.jpg">
<div class="banner-info">
<div class="banner-title">
上海迪士尼乐园
</div>
<div class="banner-number">
<span class="iconfont banner-icon"></span>
39
</div>
</div>
</div>
<common-gallery :imgs="imgs" v-show="showGallery" @close="handleGalleryClose"></common-gallery>
</div>
</template>
<script>
import CommonGallery from 'common/gallery/Gallery'
export default{
name: 'DetailBanner',
data(){
return {
showGallery: false,
imgs: ['http://img1.qunarzz.com/sight/p0/1607/7c/7cda8b6782dabd80b4.img.jpg_r_800x800_d6a63068.jpg', 'http://img1.qunarzz.com/sight/p0/1607/7c/7cda8b6782dabd80b4.img.jpg_r_800x800_d6a63068.jpg', 'http://img1.qunarzz.com/sight/p0/1607/7c/7cda8b6782dabd80b4.img.jpg_r_800x800_d6a63068.jpg']
}
},
components: {
CommonGallery
},
methods: {
handleGalleryClick(){
this.showGallery = true;
},
handleGalleryClose(){
this.showGallery = false;
}
}
}
</script>
解释:
(1)showGallery是布尔值,控制Gallery组件的显隐性。
(2)Gallery.vue与Banner.vue之间imgs传值属于父子传值。
(3)Gallery.vue调用Banner.vue中的方法,实现点击页面关闭画廊轮播图片。