1. First enter the official website of Swiper and open the manual of S6 in Vue


2. Then search the whole page for mouse related operations

The above figure shows the API(module) for Swiper to call, with the tags of note1.Text:

This means that Swiper6 is no longer bound with options in attributes as before, but is used as a module

3. Pseudocode demonstration

<template> <swiper mousewheel // This is the property defined (listen to the wheel, control the swiper-slide), > <swiper-slide> content </swiper-slide> </swiper> </template> <script> import "swiper/swiper.min.css"; import SwiperCore, { Mousewheel } from "swiper"; Import {Swiper, SwiperSlide} from "Swiper /vue"; import {Swiper, SwiperSlide} from" Swiper /vue"; // swiper components SwiperCore.use(Mousewheel); // Register the modules it introduces on demand. So it's ready to use; export default { name: "SwiperTest", components: { Swiper, SwiperSlide } } </script>

4. To summarize

4.1Find the appropriate module in the document

4.2Introduce and register the module

4.3Pay attention to case in property references