Swiper Vue中useSwiper()无效，返回undefined问题求助

问题原因 #

useSwiper()必须在Swiper组件的内部作用域（子组件或slot内容）中调用，它依赖Swiper注入的上下文。如果在Swiper组件外部调用该方法，就会返回undefined，无法获取到swiper实例。

解决方案 #

方案1：将自定义按钮放到Swiper的slot中 #

把控制按钮放在Swiper组件提供的slot里（比如#container-end），确保处于Swiper的作用域内，此时useSwiper()就能正常获取实例：

<template>
  <Swiper
    :modules="[Navigation]"
    :slides-per-view="1"
    class="swiper"
  >
    <!-- 自定义导航按钮放在Swiper的container-end slot中 -->
    <template #container-end>
      <div class="custom-nav">
        <button @click="swiper.slidePrev()">上一页</button>
        <button @click="swiper.slideNext()">下一页</button>
      </div>
    </template>

    <SwiperSlide>Slide 1</SwiperSlide>
    <SwiperSlide>Slide 2</SwiperSlide>
    <SwiperSlide>Slide 3</SwiperSlide>
  </Swiper>
</template>

<script setup>
import { useSwiper } from 'swiper/vue';
import { Navigation } from 'swiper/modules';
import 'swiper/css';
import 'swiper/css/navigation';

// 在Swiper作用域内调用，正常获取实例
const swiper = useSwiper();
</script>

方案2：通过@swiper事件获取实例（按钮在Swiper外部） #

如果需要把按钮放在Swiper组件外部，可以监听Swiper的@swiper事件，将实例保存到组件ref中，再用ref控制导航：

<template>
  <div>
    <!-- 外部按钮通过ref调用swiper方法 -->
    <button @click="swiperRef?.slidePrev()">上一页</button>
    <button @click="swiperRef?.slideNext()">下一页</button>

    <Swiper
      :modules="[Navigation]"
      :slides-per-view="1"
      class="swiper"
      @swiper="saveSwiperInstance"
    >
      <SwiperSlide>Slide 1</SwiperSlide>
      <SwiperSlide>Slide 2</SwiperSlide>
      <SwiperSlide>Slide 3</SwiperSlide>
    </Swiper>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { Navigation } from 'swiper/modules';
import 'swiper/css';
import 'swiper/css/navigation';

const swiperRef = ref(null);

// 保存swiper实例到ref
const saveSwiperInstance = (swiper) => {
  swiperRef.value = swiper;
};
</script>

内容的提问来源于stack exchange，提问作者Frallen