9-2#去哪儿网app#公用图片画廊组件拆分

点击图片后产生的画廊在多个页面都有，所以可以定义公用组件，在src下创建新文件夹common、gallary以及Gallary.vue，并需要在webpack.base.conf.js设置别名，为了写路径的时候方便，记得重启项目。

关键点是轮播图的设置，v-for循环，以及添加点击banner和Gallary互相返回的事件。

注意点击gallary(画廊)，返回banner的事件的函数内用到this.$emit，向外(banner)触发事件，且banner要接受。

banner的js：

<script>
import CommonGallary from 'common/gallary/Gallary'
export default {
    name: 'DetailBanner',
    data() {
        return {
            showGallary: false,
            imgs:["http://img1.qunarzz.com/sight/p0/201404/23/04b92c99462687fa1ba45c1b5ba4ad77.jpg_600x330_bf9c4904.jpg","//img1.qunarzz.com/sight/p0/1605/9f/9f600a32f70a2d1290.water.jpg_600x330_0beeee99.jpg"]
        }
    },
    methods: {
        handleClick () {
            this.showGallary = true
        },
        handleGallaryClose () {
            this.showGallary = false
        }
    },
    components: {
        CommonGallary
    },
}
</script>

gallary的js：

<script>
export default {
    name: 'CommonGallary',
    props:{
        imgs: {
            type: Array,
            default () {
                return []
            }
        }
    },
    data () {
        return {
            swiperOptions: {
                pagination: '.swiper-pagination',
                paginationType: 'fraction',
                // 这个是添加下面的图1/2文字效果
                observeParents: true,
                observer: true
            }
        }
    },
    methods: {
        handleGallaryClick() {
            this.$emit('close')
        }
    }
}
</script>