swiper4怎么重新初始化

菜鸟前端

  html部分

<div @mouseenter="on_top_enter" @mouseleave="on_top_leave">

    <swiper class="swiper" ptions="swiperOption" ref="mySwiper">

      <swiper-slide>

        <div

          class="echarts"

          style="width: 400px; height: 270px"

        ></div>

      </swiper-slide>

      <div

        class="swiper-pagination swiper-pagination-bullets"

        slot="pagination"

      ></div>

      <div class="swiper-button-prev" slot="button-prev"></div>

      <div class="swiper-button-next" slot="button-next"></div>

    </swiper>

  </div>

Js部分

import { Swiper, SwiperSlide } from "vue-awesome-swiper";

import "swiper/dist/css/swiper.css";

export default {

  components: {

    Swiper,

    SwiperSlide,

  },

  data() {

    return {

      swiperOption: {

        slidesPerView: 1,

        spaceBetween: 30,

        loop: true,

        pagination: {

          el: ".swiper-pagination",

          clickable: true,

          renderBullet(index, className) {

            return `<span class="${className} swiper-pagination-bullet-custom">${

              index + 1

            }</span>`;

          },

        },

        navigation: {

          nextEl: ".swiper-button-next",

          prevEl: ".swiper-button-prev",

        },

        /*autoplay: {

          delay: 2500,

          disableOnInteraction : false

        },*/

        autoplay: true,

      },

    };

  },

methods: {

鼠标移入暂停轮播

on_top_enter() {

      this.$refs.mySwiper.$swiper.autoplay.stop();

},

鼠标移出开启轮播

    on_top_leave() {

      this.$refs.mySwiper.$swiper.autoplay.start();

    },

}

}

菜鸟前端

    <swiper class="swiper" options="swiperOption" ref="mySwiper">