如何在 Nuxt 3 中使用模板引用

Question

在 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>

Answer 1

使用选项 API

<script>
export default {
  mounted() {
    console.log('input', this.$refs['my-cool-div'])
  }
}
</script>

<template>
  <div ref="my-cool-div">
    hello there
  </div>
</template>

使用组合 API

<script setup>
const myCoolDiv = ref(null)

const clickMe = () => console.log(myCoolDiv)
</script>

<template>
  <button @click="clickMe">show me the ref</button>
  <div ref="myCoolDiv">
    hello there
  </div>
</template>