swiper

借助 swiper 插件，实现自己的 swiper 组件

使用步骤

1. 安装 swiper 模块
2. 在 Swiper.vue 组件中实现 swiper 模板、swiper 样式、swiper 的逻辑
   PS:
   1. 需要引入 swiper 模块
   2. 需要引入 swiper 样式
3. 选择某个生命周期钩子函数来做 swiper 的初始化（new Swiper） mounted

问题与解决方法

1. 如果让 Swiper 组件更加可配置

   通过 props 来控制，

2. 多次调用 Swiper 组件时，发现 小圆点 不更新的问题

   原因是 new Swiper() 时传递的是 css 选择器的方式 new Swiper('.swiper-container')。会导致同一个 Swiper 组件 被 初始化了多次。

   解决方法：new Swiper(this.$el)

3. Swiper 轮播图的数据是由调用者来通过 prop 传递下来的。同步的数据传递是没有问题的。但是如果调用者传递的数据是在 ajax 请求到之后再更新的话，就会出现轮播图滑动不了的问题

   原因是：ajax 是异步的，等到数据更新时，Swiper 组件已经实例化了。

   解决方法是：

   1. 调用者解决
      在调用 Swiper 组件时，通过 v-if 来做控制，等数据拿到之后再去使用 Swiper

   2. 提供者解决

      1. updated 生命周期钩子函数来处理，（数据更新并且真实 DOM 已经更新的时候触发）

         但是 updated 这个生命周期的钩子函数会不管什么数据更新，都会触发。带来的问题就是性能考虑方法

  2. 使用 watch 去监听那个数据。这时发现监听的回调函数执行之后，其实真实DOM还没有更新

        1. setTimeout
        2. this.$nextTick()