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

Question

在 Nuxt2 中，您可以在 <script> 中使用 this.$refs

我想知道 Nuxt3 的等效项是什么。

我需要它来访问元素的 innerText。我不允许使用 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>

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

How to use template refs in Nuxt 3

vue.js

nuxt.js

vuejs3

nuxtjs3