在 Nuxt2 中，您可以使用模板 $refs访问<script>它们this.$refs
我想知道 Nuxt3 的等效项是什么。
我需要它来访问元素的内部文本。我不被允许使用querySelector或getElementById等等。
这就是我们编写代码的方式。我可以提供 html 元素ref="fooBar"，但我无法使用this.$refs.fooBar或 访问它this.$refs。
<script setup lang="ts">
import { ref, computed } from 'vue';
const foo = ref('bar');
function fooBar() {
//Do stuff
}
</script>
<template>
//Html here
</template>
当用户按下箭头键时，我试图调用 swiper 附带的 .slideNext() 和 .slidePrev 。
我已经成功地使用 querySelector 做到了这一点，如下所示：
const changeSlide = (event: KeyboardEvent) => {
const slides = document.querySelector('.swiper').swiper
if(event.key === 'ArrowLeft') {
slides.slidePrev();
} else if (event.key === 'ArrowRight') {
slides.slideNext();
}
}然而，此方法会产生警告，并且该项目通常不允许使用 querySelector。因此，我不想使用 ref 来选择滑动器，但我还没有成功。
这是我尝试过的：
<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';
import { Navigation } from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/css';
import 'swiper/css/navigation';
// just some imports that are needed
const swiperRef = ref(); …