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

ゝ一纸荒年。 2021-09-16 03:30 395阅读 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 条评论，395人围观）

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

相关阅读

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

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

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

相关 vue项目依赖文件拆分

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

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

相关学习笔记——react公共组件与组件跳转

-------------------- > 在react中，除了页面级组件以外，我们有时还需要一些公共的组件，这些组件会被一个或多个页面级组件使用。例如导航组件和控制数量加

ゝ一纸荒年。/ 2022年11月22日 05:30/ 0 赞/ 224 阅读

相关数据库拆分：横向拆分和纵向拆分

一、基本思想 Sharding的基本思想就要把一个数据库切分成多个部分放到不同的数据库(server)上，从而缓解单一数据库的性能问题。不太严格的讲，对于海量数据的数据库，

红太狼/ 2022年03月16日 08:36/ 0 赞/ 372 阅读

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

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

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

相关 vue组件的拆分

vue组件的拆分 <div class="div">  <moban></mo

超、凢脫俗/ 2021年12月19日 04:05/ 0 赞/ 292 阅读

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

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

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

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

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

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

相关 vue项目笔记（15）-父子组件传值

父子组件传值在上节中，我们已经请求到数据，现在来实现数据的传递（父→子），我们结合代码，以Recommend组件为例： 1、首先，在data中声明数组rec

向右看齐/ 2021年09月16日 02:34/ 0 赞/ 358 阅读

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

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

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