关于前端:vue中关于vueawesomeswiper的用法少走弯路

明天做我的项目中应用到了轮播图，而后引入的时候出了些问题，当初整顿一下，预防当前再出问题。
目前（2022 年 1 月 22 日）依据查阅多方材料收集到的材料，我这里列一下：

1. 最好用的版本是v3.1.3。
   利用 npm 下载是这个指令：npm install vue-awesome-swiper@3.1.3 --save，对，这个版本不须要写成npm install swiper vue-awesome-swiper@3.1.3 --save, 比照一下啊，下边这个多了个swiper

2. 倡议部分引入（这里也只赘述部分引入的办法），毕竟 vue-awesome-swiper 也不算特地小，除非你有多个组件都须要轮播图

   import 'swiper/dist/css/swiper.css'
   // 留神下边引入的 swiper 和 swiperSlide 第一个字母 s 都是小写的，大写会报错
   import {swiper, swiperSlide} from 'vue-awesome-swiper'

   // 在部分组建中将其作为组件注入
   components: {
    swiper,
    swiperSlide,
   },

   computed: {
    // 这个就是 swiper 的实例，有很多办法都能够通过这个函数的返回值获取到
    swiper() {return this.$refs.mySwiper.swiper},
   },

   <swiper :options="swiperOption" ref="mySwiper">
    <swiper-slide v-for="(item, i) in items" :key="i">
   <img :src="item.image"/>
    </swiper-slide>
    <!-- 依据状况引入控件 -->
    <!-- <div class="swiper-pagination"  slot="pagination"></div>
    <div class="swiper-button-prev" slot="button-prev"></div>
    <div class="swiper-button-next" slot="button-next"></div>
    <div class="swiper-scrollbar"   slot="scrollbar"></div> -->
   </swiper>

   模板代码写好后会发现上边绑定了一个自定义属性 options，其值为swiperOption，这个swiperOption 是能够自定义的，写成啥都行，但要与下边 data 中对应。

   data() {
    return {
   swiperOption: {loop: true,},
    }
   },

这样就实现了！其余的业务逻辑依据理论状况在这个初始框架之下来填写就行了，装置和引入文件 时留神好了就行，避免后续呈现问题！