vue项目笔记(25)-公共组件拆分

公共组件拆分(画廊组件)

vue项目开发中,有些组件不仅仅是一个页面需要使用,这时候我们可以将其抽离出来,作为一个公共组件。公共组件常用的目录结构如下(其中Gallery.vue就是公共组件):

vue项目笔记(25)-公共组件拆分_第1张图片

Gallery.vue中的图片需要有轮播效果,故采用swiper,swiper中相关配置如下(详情参考swiper3官网):

在Gallery.vue组件中的轮播图片,需要使用v-for循环。而imgs是有父组件传过来的 ,在该组件中声明props接收,并在父组件中传递过来。

Gallery.vue

Banner.vue

解释:

(1)showGallery是布尔值,控制Gallery组件的显隐性。

(2)Gallery.vue与Banner.vue之间imgs传值属于父子传值。

(3)Gallery.vue调用Banner.vue中的方法,实现点击页面关闭画廊轮播图片。

你可能感兴趣的:(Vue,轮播)