Vue使用Swiper6（2）

Swiper6入门
vue使用Swiper6
github:awesome-swiper
这次记录主要是记录swiper6的使用，网上多是以前的版本，但是好像vue3可以直接使用swiper6，
不需要这个大佬的awesome插件了，所以就有了很多问题。
其中的重点是组件使用的是大佬的组件，原因就是swiper/vue下找不到这些组件，然后参数类也是用的options来传参，但是事件都是直接绑定到swiper上。通过ref来访问实例。

1. 局部使用：

<template>
    <div>
        <swiper ref="mySwiper" :options="swiperOptions" @swiper="onSwiper" @click="gg" 
          @slideChange="onSlideChange">
            <swiper-slide><img src="../assets/img/1.jpg" alt=""></swiper-slide>
            <swiper-slide><img src="../assets/img/2.jpg" alt=""></swiper-slide>
            <swiper-slide><img src="../assets/img/3.jpg" alt=""></swiper-slide>
        </swiper>
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
    </div>
</template>
<script>
    // Import Swiper Vue.js components
    import 'swiper/swiper-bundle.min.css' 导入样式
    import {
        Swiper,
        SwiperSlide,
    } from 'vue-awesome-swiper';  使用大佬包装的组件
    import SwiperCore, {  使用swiper6的模组扩展
        Autoplay,
        Navigation
    } from 'swiper';
    // Import Swiper styles
    SwiperCore.use([Navigation, Autoplay]); 注册模块

    export default {
        data() {
            return {
                swiperOptions: {
                    slidesPerView: 3,
                    grabCursor:true,
                    spaceBetween: 50,
                    centeredSlides: true,
                    autoplay: {
                        delay: 2500,
                        disableOnInteraction: false
                    },
                    loop: true,
                    pagination: {
                        el: '.swiper-pagination',
                        clickable: true
                    },
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev'
                    },
                }
            }
        },
        components: {
            Swiper,
            SwiperSlide,
        },
        computed: {
            swiper() {
                return this.$refs.mySwiper.$swiper
            }
        },
        methods: {
            onSwiper(swiper) {
                console.log(swiper)
            },
            onSlideChange() {
                console.log('slide change');
            },
            gg(){
                console.log('click');
            }
        },
        mounted() {
            console.log('Current Swiper instance object', this.swiper)
            this.swiper.slideTo(3, 1000, false)
        }
    };
</script>

2. 全局使用

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import VueAwesomeSwiper from 'vue-awesome-swiper' 导入两个组件
// import style (>= Swiper 6.x)
import 'swiper/swiper-bundle.min.css' 使用样式
import SwiperCore, { Navigation, Pagination, Scrollbar, A11y } from 'swiper';导入模组
SwiperCore.use([Navigation, Pagination, Scrollbar, A11y]);使用模组
Vue.use(VueAwesomeSwiper, /* { default options with global component } */)全局注册插件

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

swiperOptions:是参数的重点。