swiper组件的使用

1 介绍及文档
vue-awesome-swiper 基于 Swiper4、适用于 Vue 的轮播组件，支持服务端渲染和单页应用。
https://www.swiper.com.cn/
https://www.npmjs.com/package/vue-awesome-swiper
2 安装
npm install vue-awesome-swiper --save
3 引入
import { swiper, swiperSlide } from ‘vue-awesome-swiper’;
import ‘swiper/css/swiper.css’
4 使用

components: {
swiper,//swpier组件
swiperSlide,//swpier组件
},

swiperOption: {
paginationClickable: true,
centeredSlides: true,
slidesPerView : 5,
slidesPerGroup : 1,
freeMode: true,
initialSlide: 0,
on:{
slideChange : (swiper) => {
},
},
},//组件配置项

5 踩坑
5.1 坑点一：引入css样式
问题 ：
报找不到依赖
解决：
import ‘swiper/dist/css/swiper.css’ 官方文档
import ‘swiper/css/swiper.css’ 实战
5.2 this 的指向
问题：
需要的events里面调用vue实例的函数，swpier4开始 ，回调函数this的指向为swiper组件
当配置项写在了vue的data里面，就没有办法拿到全局的实例
比如
图片: https://uploader.shimo.im/f/5rqACqyytC4QbsHJ.png
解决：
把配置项写在created里面， 可以利用self 指向全局实例
图片: https://uploader.shimo.im/f/7req30ico4Ib3TzB.png
5.3 this.swiper 获取不到swiper组件
问题
当我们需要调用swiper的method，却又不是通过new swiper的时候，怎么拿到这个组件呢？

解决
notNextTick: true,

notNextTick设置为true，组件则不会通过NextTick来实例化swiper，也就意味着你可以在第一时间获取到swiper对象
ref=“mySwiper”
this.$refs.mySwiper.swiper.slideTo(index, 1000, false)