1、

swiper-slide相关的点击事件需要在swiperOptions配置项中调用，因为在loop模式下，直接写在swiper-slide上的click方法会在第二次循环开始时出现首张点击无反应的情况，这是由于loop模式下只复制了dom节点但没有复制dom事件

2、

swiperOptions配置项中的事件方法内的this，指向的是 swpier 实例，而不是当前的 vue，所以需要在外部定义缓存变量用来调用组件内的数据以及方法

3、

在外部定义缓存变量的时候，要在data内进行定义

data() {
  let vm = this; // 在此处定义
    return {
      swiperOptions: {
        loop: true, // 是否无缝循环
        on: {
          click: function() {
            vm.handleClick(this.realIndex); // 此处this与vm指向不同
          }
        }
      }
    };

如果使用以下该定义方法，在某些情况下会出现数据混乱的问题

定义.png

赋值.png

当页面需要多个swiper时，为了方便会根据业务需求封装swiper组件，并在同一页面多次调用，如果使用上图的定义方法，不论在哪个组件中调用swiper事件，此时vm只会拿到最后调用的那个组件内部的数据

1.png

2.png

4、

swiper事件使用箭头函数this并没有指向vue，依然是指向的swiper实例

箭头函数内的this依然指向swiper实例.png