如何在<script setup> Vue中访问this.$refs

Question

我正在尝试复制此内容，仅使用<script setup>没有this关键字的标签。

模板（来自我试图复制的代码）

<swiper ref="swiper">
    <swiper-slide></swiper-slide>
    <swiper-slide></swiper-slide>
</swiper>

<a class="swiper-navigation is-previous" @click="swiper.slidePrev()"></a>
<a class="swiper-navigation is-next" @click="swiper.slideNext()"></a>

脚本（来自我试图复制的代码）

computed: {
    swiper() {
        return this.$refs.swiper.swiper;
    }
}

尝试使用getCurrentInstance()但由于某种原因getCurrentInstance().refs返回空对象{}，即使我这样做时它就在那里console.log(getCurrentInstance())。

我的<script setup>组件

<script setup lang="ts">

import { Swiper, SwiperSlide } from 'swiper/vue';

const swiper = // ???

const handleNextSlide = () => swiper.slideNext()
const handlePrevSlide = () => swiper.slidePrev()

</script>


<template>

<div>

    <button @click="handlePrevSlide()">Prev</button>
    <button @click="handleNextSlide()">Next</button>

    <Swiper ref="swiper">
        <SwiperSlide>1</SwiperSlide>
        <SwiperSlide>2</SwiperSlide>
        <SwiperSlide>3</SwiperSlide>
        <SwiperSlide>4</SwiperSlide>
        <SwiperSlide>5</SwiperSlide>
    </Swiper>

</div>

</template>

Answer 1

如果您想要相当于：

computed: {
    swiper() {
        return this.$refs.swiper.swiper;
    }
}

在 中script setup，您只需要：

<script setup>
import { computed, ref } from "vue";
...

const swiper  = ref(null)

// .swiper will only work if the ref swiper (Swiper element) has a property named swiper
const swiperComputed = computed(() => swiper.value.swiper)

...
</script>

<template>
  <Swiper ref="swiper">
    <SwiperSlide>1</SwiperSlide>
    <SwiperSlide>2</SwiperSlide>
    <SwiperSlide>3</SwiperSlide>
    <SwiperSlide>4</SwiperSlide>
    <SwiperSlide>5</SwiperSlide>
  </Swiper>
</template>