无法将 Swiper 与“vue”一起使用：“^2.6.11”

Question

我尝试将 Swiper 与 一起使用"vue": "^2.6.11"，但它会引发运行时错误。我按照https://swiperjs.com/vue的指南进行操作，并将导入更改为：

// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from 'swiper/vue/swiper-vue.js';

// Import Swiper styles
import 'swiper/swiper-bundle.css';

错误信息：

属性或方法“onSwiper”未在实例上定义，但在渲染期间引用，事件“swiper”的无效处理程序：未定义，无法安装组件：模板或渲染函数未定义

Answer 1

Swiper组件仅适用于 Vue 3。这些组件不能在 Vue 2 中使用，但可以直接使用 Swiper API：

\n

\n

1. 在模板中的目标 Swiper 容器元素上应用模板引用。

   \n
\n

2. 在组件的mounted()钩子中，初始化一个实例Swiper，传递模板引用和 Swiper 选项，其中包括模板中分页/导航元素的选择器。

   \n
\n

\n

<script>\nimport Swiper, { Navigation, Pagination } from \'swiper\'\nimport \'swiper/css\'\nimport \'swiper/css/navigation\'\nimport \'swiper/css/pagination\'\n\nexport default {\n  mounted() {\n    2\xef\xb8\x8f\xe2\x83\xa3\n    new Swiper(this.$refs.swiper, {\n      // configure Swiper to use modules\n      modules: [Navigation, Pagination],\n      // Optional parameters\n      loop: true,\n\n      // If we need pagination\n      pagination: {\n        el: \'.swiper-pagination\',\n      },\n\n      // Navigation arrows\n      navigation: {\n        nextEl: \'.swiper-button-next\',\n        prevEl: \'.swiper-button-prev\',\n      },\n\n      // And if we need scrollbar\n      scrollbar: {\n        el: \'.swiper-scrollbar\',\n      },\n    })\n  },\n}\n</script>\n\n<template>\n  <!-- Slider main container -->\n  <div 1\xef\xb8\x8f\xe2\x83\xa3 ref="swiper" class="swiper">\n    <!-- Additional required wrapper -->\n    <div class="swiper-wrapper">\n      <!-- Slides -->\n      <div class="swiper-slide">Slide 1</div>\n      <div class="swiper-slide">Slide 2</div>\n      <div class="swiper-slide">Slide 3</div>\n    </div>\n    <!-- If we need pagination -->\n    <div class="swiper-pagination"></div>\n\n    <!-- If we need navigation buttons -->\n    <div class="swiper-button-prev"></div>\n    <div class="swiper-button-next"></div>\n\n    <!-- If we need scrollbar -->\n    <div class="swiper-scrollbar"></div>\n  </div>\n</template>\n\n<style scoped>\n.swiper-slide {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n</style>\n

\n

演示

\n