1つのページの2つ以上のswiper vueのうちの1つのページの複数のswiperが互いにswiperマルチキャスト衝突を干渉する

vueで同じページに複数のswiperをどのように処理するかは、まず2つの状況に分ける必要があります.
1、vueにVue-Awesome-Swiperを採用する場合、この方式を採用すると、swiperコンポーネントごとにclassを追加して区別し、それぞれ異なるswiperOption、swiperSlidesを確立することができ、具体的なコードは以下の通りである.

//swiper  1
<swiper :options="swiperOptionSwp1">
    <swiper-slide v-for="(slide, index) in swiperSlidesSwp1" :key="index">
    	I'm Slide {{ slide }}
    </swiper-slide>
    <div class="swiper-button-prev swp1"></div>
    <div class="swiper-button-next swp1"></div>
  </swiper> 
  //swiper  2
  <swiper :options="swiperOptionSwp2">
    <swiper-slide v-for="(slide, index) in swiperSlidesSwp2" :key="index">
    	I'm Slide {{ slide }}
    </swiper-slide>
    <div class="swiper-button-prev swp2"></div>
    <div class="swiper-button-next swp2"></div>
  </swiper> 
  //js  
  //swiper  1   
  swiperOptionSwp1：{
  		navigation: {
             nextEl: '.swiper-button-next.swp1',
             prevEl: '.swiper-button-prev.swp1',
         },
         loop:false
  },
  //swiper  2   
  swiperOptionSwp2: {
         navigation: {
             nextEl: '.swiper-button-next.swp2',
             prevEl: '.swiper-button-prev.swp2',
         },
         loop:false
     },

2、汎用メソッドで作成されたswiperを使用している場合、具体的には以下の通りです.

var mySwiper = new Swiper ('.swiper-container', {
    direction: 'vertical', //       
    loop: true, //       
    pagination: {
      el: '.swiper-pagination',
    },
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
  })     

上記のような書き方を選んだ場合は、異なるswiperに異なるclass区分を追加することもできます.コードは以下の通りです.

<div class="swiper-container swiper1">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
    </div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>
<div class="swiper-container swiper2">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
    </div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>

//js  
var mySwiper = new Swiper ('.swiper1', {
    direction: 'vertical', //       
    loop: true, //       
    pagination: {
      el: '.swiper-pagination.swiper1',
    },
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
  })   
  var mySwiper = new Swiper ('.swiper2', {
    direction: 'vertical', //       
    loop: true, //       
    pagination: {
      el: '.swiper-pagination.swiper2',
    },
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
  })      

	    ，     O(∩_∩)O~