Vue $refs动态绑定组件

需求 ：

已实现：

把不同的vue组件放进<swiper-side>中，滑动鼠标中键可以切换页面，切换页面时会播放动画。

每个vue组件中都有相同的 enterAnimation()、leaveAnimation()两个方法

此时每次进入页面时播放动画是通过多个if条件判断实现的

缺点 ：

实际应用中不止3个组件，多个if实现不仅代码臃肿、重复度也高

目标：

想通过使用for循环判断当前的swiper.activeIndex的值，相等则播放enterAnimation()，不等就播放leaveAnimation()

代码实现如下：

<swiper :options="swiperOption" ref="mySwiper">
  <swiper-slide>
    <page-one  :ref="'page' + pages[0]"></page-one>
  </swiper-slide>

  <swiper-slide>
    <page-two :ref="'page' + pages[1]"></page-two>
  </swiper-slide>

  <swiper-slide>
    <page-three :ref="'page' + pages[2]"></page-three>
  </swiper-slide>

</swiper>

 script部