vue awesome swiper 实战，踩坑

install

npm install swiper vue-awesome-swiper --save

留神版本
vue-awesome-swiper@4.1.1
swiper@5.2.0

默认装置的是最新的，npm ls swiper 或者
npm ls vue-awesome-swiper之后会发现版本匹配问题！

留神版本：

此处版本是个坑，版本不匹配，文件门路都不统一，必定会有问题！！
不阐明版本的demo都是耍流氓！！

抽出独自组建 BannerSwiper.vue;
Home.vue 中应用BannerSwiper

代码如下：

BannerSwiper.vue

<template>   <div v-swiper:mySwiper="swiperOption" class="swiper-container">    <div class="swiper-wrapper">      <div class="swiper-slide" v-for="(item, index) in banners" :key="index">        <a :href="item.link">          <img class="img" :src="item.image"/>        </a>      </div>    </div>    <div class="swiper-pagination" slot="pagination"></div>  </div></template><script>import { Swiper, SwiperSlide, directive } from "vue-awesome-swiper";import "swiper/css/swiper.css";// If you use Swiper 6.0.0 or higher// import "swiper/swiper-bundle.css";export default {  name: "BannerSwiper",  props: {    banners: {      type: Array,      default: [],    },  },  components: {    Swiper,    SwiperSlide,  },  directives: {    swiper: directive,  },  data() {    return {      swiperOption: {        autoplay: {          disableOnInteraction: false, //用户操作后是否禁止主动循环          delay: 1000, //自主动循环工夫        }, //可选选项，主动滑动        speed: 1000, //切换速度，即slider主动滑动开始到完结的工夫（单位ms）        loop: true, //循环切换        grabCursor: true, //设置为true时，鼠标笼罩Swiper时指针会变成手掌形态，拖动时指针会变成抓手形态        // setWrapperSize: true, //Swiper应用flexbox布局(display: flex)，开启这个设定会在Wrapper上增加等于slides相加的宽或高，在对flexbox布局的反对不是很好的浏览器中可能须要用到。        autoHeight: true, //主动高度。设置为true时，wrapper和container会随着以后slide的高度而发生变化。        scrollbar: ".swiper-scrollbar",        mousewheelControl: true, //设置为true时，能应用鼠标滚轮管制slide滑动        observeParents: true, //当扭转swiper的款式（例如暗藏/显示）或者批改swiper的子元素时，主动初始化swiper        pagination: {          el: ".swiper-pagination",          // type : 'progressbar', //分页器形态          clickable: true, //点击分页器的批示点分页器会管制Swiper切换        },        // navigation: {        //   nextEl: ".swiper-button-next",        //   prevEl: ".swiper-button-prev",        // },      },    };  },  computed: {      swiper() {        return this.$refs.mySwiper      }    },    mounted() {      console.log('Current Swiper instance object', this.swiper)      this.mySwiper.slideTo(1, 1000, false)    }};</script><style lang="scss" scoped>.swiper {  height: 216px;  .swiper-slide {    background-position: center;    background-size: cover;  }}.img {  width: auto;  height: auto;  max-width: 100%;  max-height: 100%;}</style>

Home.vue

<!-- --><template><div id="home"><banner-swiper :banners="banners" /></div></template><script>//你本人的BannerSwiper.vue门路 !!!!import BannerSwiper from "./ChildComps/BannerSwiper";export default {name: "Home",components: {BannerSwiper},data() {  return {  banners: [],};},created() {//1.申请banner数据this.getBannerData();},methods: {getBannerData() {getBannerData().then((res) => {this.banners = res.data.banner;//拉取的数据});},},};</script ><style scoped>//style}</style>

总结：折磨了好几天，终于搞进去了，自己也是初学者，各种demo,官网，搜了半天，搞进去的。
1 多练，多总结，高级用法相熟了，看问题的深度，角度都会不一样。
2 多看源码，从源码中发现问题。
3 肯定要留神版本，各种api，属性，会有很大差别。