快捷導(dǎo)航

swiper/vue 獲取 swiper實(shí)例方法詳解

更新時(shí)間：2023年12月12日 12:04:02 作者：yilaisai

在網(wǎng)上搜了一下如何調(diào)用swiper實(shí)例,大部分都是通過(guò) swiperRef = new Swiper(‘.swiper’, options) 這種方法初始化swiper,然后直接能用 swiperRef 實(shí)例,這篇文章主要介紹了swiper/vue 獲取 swiper實(shí)例方法詳解,需要的朋友可以參考下

在Vue3中使用swiper/vue，如何獲取swiper的組件實(shí)例？在項(xiàng)目中使用到 swiper/vue，想調(diào)用slideTo方法，發(fā)現(xiàn)通過(guò)refs的方法，拿不到swiper實(shí)例。

<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(()=> {
     	 console.log(swiperRef.value)
     	 swiperRef.value.slideTo(3)
     })
</script>

通常我們想獲取VUE實(shí)例，會(huì)如上面實(shí)例，swiperRef = ref(null)，再調(diào)用swiperRef.value就能拿到實(shí)例，但是這樣調(diào)用不了 swiperRef.value.slideTo() 方法，會(huì)報(bào)錯(cuò)slideTo方法不存在。
在網(wǎng)上搜了一下如何調(diào)用swiper實(shí)例，大部分都是通過(guò) swiperRef = new Swiper(‘.swiper’, options) 這種方法初始化swiper，然后直接能用 swiperRef 實(shí)例。這種方法需要自己定義一個(gè)div通過(guò)類名去初始化，與我直接調(diào)用 Swiper 組件不一樣。

解決方法：

查看了swiper官方文檔，這里在VUE中使用swiper有給出獲取實(shí)例的方法，

<template>
		<swiper
        	@swiper="setSwiper"
	        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)
	// 將swiper實(shí)例賦值給swiperRef 
	const setSwiper = (swiper)=> {
	        swiperRef.value = swiper
    }
	onMounted(()=> {
     	 swiperRef.value.slideTo(3)
     })
</script>

重點(diǎn)在于 @swiper=“setSwiper”，參數(shù)就是swiper實(shí)例，setSwiper方法在mounted之前就會(huì)執(zhí)行。

到此這篇關(guān)于swiper/vue 獲取 swiper實(shí)例方法的文章就介紹到這了,更多相關(guān)vue 獲取 swiper實(shí)例內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: