swiper/vue Get swiper instance method details

Using swiper/vue in Vue3, how to get component instance of swiper? I used swiper/vue in the project. I wanted to call the slideTo method, but found that I could not get the swiper instance through the refs method.

<template>
    <swiper
        ref="swiperRef"
        class="promotion-activity-swiper"
        :modules="modules"
        :space-between="5"
        :initialSlide="2"
        slides-per-view="auto"
        :free-mode="true"
        :pagination="{ clickable: true }"
    >
        <swiper-slide>
        </swiper-slide>
    </swiper>
</template>
<script setup>
	 import { reactive, onMounted, watch, ref } from 'vue';
	 import { Swiper, SwiperSlide } from 'swiper/vue'
	 import { FreeMode } from 'swiper/modules'
    import 'swiper/css'
    import 'swiper/css/free-mode'
	const swiperRef = ref(null)
	onMounted(()=> {
     	 ()
     	 (3)
     })
</script>

Usually, we want to get the VUE instance, as shown above, swiperRef = ref(null), and then call it to get the instance, but if the () method cannot be called in this way, the slideTo method will not exist.
I searched online how to call swiper instances. Most of them initialize swiper through the method swiperRef = new Swiper('.swiper', options) and then use the swiperRef instance directly. This method requires you to define a div and initialize it through the class name, which is different from my direct call to the Swiper component.

Solution:

Check out the official swiper documentation hereUse swiper in VUEThere is a way to get an instance,

&lt;template&gt;
		&lt;swiper
        	@swiper="setSwiper"
	        class="promotion-activity-swiper"
	        :modules="modules"
	        :space-between="5"
	        :initialSlide="2"
	        slides-per-view="auto"
	        :free-mode="true"
	        :pagination="{ clickable: true }"
	    &gt;
	        &lt;swiper-slide&gt;
	        &lt;/swiper-slide&gt;
	    &lt;/swiper&gt;
&lt;/template&gt;
&lt;script setup&gt;
	 import { reactive, onMounted, watch, ref } from 'vue';
	 import { Swiper, SwiperSlide } from 'swiper/vue'
	 import { FreeMode } from 'swiper/modules'
    import 'swiper/css'
    import 'swiper/css/free-mode'
	const swiperRef = ref(null)
	// Assign the swiper instance to swiperRef	const setSwiper = (swiper)=&gt; {
	         = swiper
    }
	onMounted(()=&gt; {
     	 (3)
     })
&lt;/script&gt;

The point is @swiper="setSwiper", the parameter is the swiper instance, and the setSwiper method will be executed before mounted.

This is the end of this article about how to obtain swiper instances by swiper/vue. For more related vue to obtain swiper instance content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!