vue3项目一个页面引入多个swiper的Thumbs(略缩图)，swiper之间相互冲突

开发一个vue3+ts项目，想要一个类似于手机相册的效果，上面是大图，下面是小图，切换小图大图改变，切换大图小图改变,使用swiper插件的Thumbs属性

类似于

我在页面中写了三个swiper，但是我使用Thumbs时，swiper之间就相互影响，解决办法就是 :thumbs=“{ swiper: xThumbs }”，thumbs里的swiper名字不相同

附上代码

//主图
 <swiper  class="xswiper" @swiper="onSlideChange" :slides-per-view="1":space-between="3"       :thumbs="{ swiper: XXXThumbs }" :modules="[Thumbs]">
  <swiper-slide class="w-100% h-full " v-for="( item, index ) in  XXXX ":key="index">
     <img :src="item.url"class="w-90% " alt="">
   </swiper-slide>
</swiper>
 <!-- 略缩图 -->
   <swiper v-if="item.id == 5" class="  xswiper  w-87% position-static" :navigation="true"
      :modules="modules" :slides-per-view="4" :space-between="3" @swiper="setThumbsSwiperx">
    <swiper-slide class="x-swiper w-100% h-70px"v-for="( item, index) in xxxx " :key="index">
        <img :src="item.url" alt="">
      </swiper-slide>
  </swiper>

ts代码

 // 相册式切换
      setThumbsSwiperct(swiper: any) {
      //你定义的swiper的别名
        你定义的swiper的别名 = swiper
      },