vue3中使用swiper——一个页面多次使用swiper的联动问题【踩坑记录】

一、场景使用

先说一下我的场景，各个区域都是一个Area组件，组件个数从后台获取数据的遍历的。Area组件里面包含了swiper组件。所以我一个页面有多个swiper。然后就出现点击第一个区域的左右按钮切换所有区域的轮播图都会切换的问题。

页面结构如下：

二、swiper使用

2.1、使用命令 npm install swiper 安装 swiper插件；

2.2、我main.js中并没有做引入，直接在使用组件中引入的，不联动精简版完整代码如下。

<template>
  <div class="project">
    <div class="swiper-wrap">
      <swiper
          :modules="modules"
          :spaceBetween="10" // 间隙
          :slidesPerView="4" // 一屏显示的slide个数  'auto'
          :slidesPerGroup="4" // 每组多少个swiper滑块
          :navigation="true" // 开启左右按钮，默认在内
          class="mySwiper"
          @swiper="onSwiper"
          @slideChange="onSlideChange"
      >
        <swiper-slide v-for="(num,index) in 9" :key="num" @click="clickProject(index)">
          <div class="swiper-content">
            <div class="swiper_contentImg"></div>
            <div class="swiper_contentTitle">
              <p>美的空调{{index}}</p>
              <p><span>￥3456</span><span>加入购物车</span></p>
            </div>
          </div>
        </swiper-slide>
      </swiper>
    </div>
  </div>
</template>

<script setup>
const props=defineProps(['currentIndex']);

import {Swiper, SwiperSlide} from 'swiper/vue'; // swiper所需组件
import {Autoplay, Navigation, Pagination, A11y} from 'swiper/modules';
// 引入swiper样式，对应css 如果使用less或者css只需要把scss改为对应的即可
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import {ref} from "vue";
const modules = [Autoplay, Pagination, Navigation, A11y];
const onSwiper=()=>{}
const onSlideChange=()=>{}


// 点击商品
const clickProject=(index)=>{
  console.log(index)
}

</script>
<style scoped lang="scss">
.project {
  width: 100%;
  &-swiper {
    position: relative;
    width: 91%;
    margin: auto;
    swiper {
      width: 100%;
    }
  }
}

.swiper-content {
  background-color: #fff;
  border-radius: 4px;
  .swiper_contentImg{
    width: 100%;
    height: 260px;
  }
  .swiper_contentTitle{
    padding: 5px;
    p{
      margin: 10px 0;
      padding:0 5px;
      &:nth-of-type(2){
        display: flex;
        justify-content: space-between;
      }
    }
  }

}

</style>

联动的原因是因为我之前把navigation绑定给了一个对象，具体代码如下

<template>
  <div class="project">
      <div class="project-swiper">
              <swiper
                  :slidesPerView="4"
                  :spaceBetween="10"
                  :slidesPerGroup="4"
                  :centeredSlides="false"
                  :navigation="navigation" //这里绑定对象的话，对象调用的都是一个函数。所以所有的swiper都会联动
                  :modules="modules"
                  :currentIndex="currentIndex"
                  ref="mySwiper"
                  class="mySwiper">
              <swiper-slide v-for="(num,index) in 9" :key="num"         @click="clickProject(index)">
                  <div class="swiper-content">
                      <div class="swiper_contentImg"></div>
                      <div class="swiper_contentTitle">
                        <p>美的空调{{index}}</p>
                        <p><span>￥3456</span><span>加入购物车</span></p>
                      </div>
                  </div>
              </swiper-slide>
              
            </swiper>
          <div class='button-prev' @click.stop='prevEl'>《
          </div>
          <div class='button-next' @click.stop='nextEl'>》
          </div>
      </div>
      
  </div>
</template>

<script setup>
const props=defineProps(['currentIndex']);

import {Swiper, SwiperSlide} from 'swiper/vue'; 
import {Autoplay, Navigation, Pagination, A11y} from 'swiper/modules';
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import {ref} from "vue";

const modules = [Autoplay, Pagination, Navigation, A11y];

const navigation = ref({
    nextEl: '.button-next',
    prevEl: '.button-prev',
})

const mySwiper =ref()
const prevEl = () => {
    console.log(mySwiper.value)
}
const nextEl = () => {
  console.log(mySwiper)
}

// 点击商品
const clickProject=(index)=>{
  console.log(index)
}


</script>

都是自己的踩坑记录，属于个人见解。如有不对请指出