一，處理swiper輪播圖

在floor元件中，

輪播圖html模板

<!-- <div class="swiper-container" ref="floor1Swiper">
                <div class="swiper-wrapper">
                  <div class="swiper-slide" v-for="(carousel, index) in floor.carouselList" :key="carousel.id">
                    <img :src="carousel.imgUrl"/>
                  </div>
                </div>

                <div class="swiper-pagination"></div>

                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>
              </div> 
 
-->

js程式碼

 // watch: {
  //   floor: {
  //     handler() {
  //       //Vue.nextTick或者vm.$nextTick是一樣的功能
  //       //在最近的一次dom更新之後執行nextTick裡面傳的回撥函式
  //       this.$nextTick(() => {
  //         new Swiper(this.$refs.floor1Swiper, {
  //           // direction: "vertical", // 垂直切換選項
  //           // autoplay:true,//等同於以下設定
  //           loop: true, // 迴圈模式選項

  //           // 如果需要分頁器
  //           pagination: {
  //             el: ".swiper-pagination"
  //           },

  //           // 如果需要前進後退按鈕
  //           navigation: {
  //             nextEl: ".swiper-button-next",
  //             prevEl: ".swiper-button-prev"
  //           }

  //           // 如果需要滾動條
  //           // scrollbar: {
  //           //   el: ".swiper-scrollbar"
  //           // }
  //         });
  //       });
  //     },
  //     immediate:true //立即執行，在最近dom更新之前就會執行
  //   },
  // }
 

對於floor和listContainer元件都有輪播圖，此時可以將swiper輪播圖封裝成一個輪播圖公共元件

二，抽取公共的輪播swiper元件

1.在compoents資料夾中，新建sliderLoop資料夾- --index.vue

<template>
  <div class="swiper-container" ref="banner">
    <div class="swiper-wrapper">
      <div class="swiper-slide" v-for="(banner, index) in bannerList"
 
 :key="banner.id">
        <img :src="banner.imgUrl" />
      </div>
    </div>
    <div class="swiper-pagination"></div>

    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </div>
</template>
<script>
import Swiper from "swiper";
import "swiper/css/swiper.min.css";
export default {
  name: "SliderLoop",
  props:['bannerList'],
  watch: {
    bannerList: {
      handler() {
        //Vue.nextTick或者vm.$nextTick是一樣的功能
        //在最近的一次dom更新之後執行nextTick裡面傳的回撥函式
        this.$nextTick(() => {
          new Swiper(this.$refs.banner, {
            // direction: "vertical", // 垂直切換選項
            // autoplay:true,//等同於以下設定
            loop: true, // 迴圈模式選項

            // 如果需要分頁器
            pagination: {
              el: ".swiper-pagination"
            },

            // 如果需要前進後退按鈕
            navigation: {
              nextEl: ".swiper-button-next",
              prevEl: ".swiper-button-prev"
            }

            // 如果需要滾動條
            // scrollbar: {
            //   el: ".swiper-scrollbar"
            // }
          });
        });
      },
      immediate: true //立即執行，在最近dom更新之前就會執行
    }
  }
};
</script>

<style lang="less" scoped>
</style>

2.在入口檔案main.js全域性註冊，Vue.component('SliderLoop',SliderLoop)

3.在floor和listContainer元件,例項化輪播圖元件

  <div class="center">
        <!--banner輪播-->
        <SliderLoop :bannerList="bannerList"></SliderLoop>
        <!-- <div class="swiper-container" ref="banner">
          <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="(banner, index) in bannerList" :key="banner.id">
              <img :src="banner.imgUrl" />
            </div>
            
          </div>
          <div class="swiper-pagination"></div>

          <div class="swiper-button-prev"></div>
          <div class="swiper-button-next"></div>
        </div> -->
      </div>

注；父子元件通訊，屬性傳遞，:bannerList="bannerList"

<div class="floorBanner">
              <SliderLoop :bannerList="floor.carouselList"></SliderLoop>
              <!-- <div class="swiper-container" ref="floor1Swiper">
                <div class="swiper-wrapper">
                  <div class="swiper-slide" v-for="(carousel, index) in floor.carouselList" :key="carousel.id">
                    <img :src="carousel.imgUrl"/>
                  </div>
                </div>

                <div class="swiper-pagination"></div>

                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>
              </div> -->
            </div>

注：父子元件通訊