vue项目笔记（25）-公共组件拆分

ゝ一纸荒年。 2021-09-16 03:30 486阅读 0赞

# 公共组件拆分（画廊组件） #

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

![70][]

Gallery.vue中的图片需要有轮播效果，故采用swiper，swiper中相关配置如下（详情参考swiper3官网）：

![70 1][]

在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中的方法，实现点击页面关闭画廊轮播图片。

[70]: /images/20210802/bf0e371cf0c8456da25d5721f2f4e2ca.png
[70 1]: /images/20210802/936b0f7d420e4964af4b5b28ed0cf3eb.png

发表评论取消回复

表情：

评论列表（有 0 条评论，486人围观）

还没有评论，来说两句吧...

相关阅读

相关【Vue_实现共用/公共组件实现】vue.js公共组件

问题？我们需要让其每个页面的共有部分不再重复编写，怎么降低代码的冗余度？例如：导航栏的共用组件怎么实现？解决 App.vue中写好公共组件 2

ゞ浴缸里的玫瑰/ 2024年03月16日 22:04/ 0 赞/ 138 阅读

相关项目代码拆分结构

最上层是一个POM类型作用对整个商城项目中的资源进行统一管理下面是继承子项目（ pom类型）再继承一个工具类（pom类型) 然后每个子项目拆分(controller map

╰半橙微兮°/ 2023年06月22日 13:59/ 0 赞/ 104 阅读

相关 vue中公共组件在部分组件中显示

场景导航条只在除登录注册以外以及特殊页面显示；公共组件在部分页面显示，部分页面不显示。方法: router-view结合$route.meta 代码: 项目

以你之姓@/ 2023年06月14日 10:53/ 0 赞/ 84 阅读

相关 webpack生产、开发公共配置拆分

代码已上传至github github代码地址：https://github.com/Miofly/mio.git webpack.common.js 以下是公共配置，

不念不忘少年蓝@/ 2023年03月12日 13:28/ 0 赞/ 72 阅读

相关对vue大组件拆分的思考

拆分大对象组件化的vue给人的印象往往是快而小，简洁明了，但随着业务量和判断逻辑的堆叠产生，可能也会诞生一些很大的组件。一个组件的HTML的代码量超过200行应该就

超、凢脫俗/ 2023年03月01日 05:46/ 0 赞/ 255 阅读

相关 vue项目依赖文件拆分

需求背景：在构建vue单页面项目时，会将所有依赖打包成一个文件，如果依赖文件过大，会影响页面渲染。为了好的用户体验我们需要对依赖文件进行拆分，那么如何拆分呢？解

Dear 丶/ 2022年12月17日 05:29/ 0 赞/ 253 阅读

相关 vue(三)—组件与组件的拆分

组件分为全局组件和局部组件，每个vue的组件都是vue实例，每个vue实例也都是组件，组件定义后就可以多次的拿来当模板用每个组件里面都有一个模板属性templa

我不是女神ヾ/ 2022年01月27日 11:57/ 0 赞/ 599 阅读

相关 vue路由分文件拆分管理

这里说的路由拆分指的是将路由的文件，按照模块拆分，这样方便路由的管理，更主要的是方便多人开发。具体要不要拆分，那就要视你的项目情况来定了，如果项目较小的话，也就一二十个路由，那

雨点打透心脏的1/2处/ 2021年09月19日 16:22/ 0 赞/ 469 阅读

相关 vue项目笔记（25）-公共组件拆分

公共组件拆分（画廊组件） vue项目开发中，有些组件不仅仅是一个页面需要使用，这时候我们可以将其抽离出来，作为一个公共组件。公共组件常用的目录结构如下（其中Galle

ゝ一纸荒年。/ 2021年09月16日 03:30/ 0 赞/ 487 阅读

相关 Vue页面骨架—— 组件拆分

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

朱雀/ 2021年07月25日 15:48/ 0 赞/ 550 阅读