如何定位 Vue 3 组件 <script setup> 内的元素？

Question

如何在这个 vue 组件中使用 test class 定位元素：

<template>
  <div id="test" class="test">

  </div>
</template>


<script setup>

console.log(document.querySelector('.test'))
</script>

该组件被导入到另一个组件中。控制台输出null.

Answer 1

最佳做法是使用 ref 而不是 DOM 操作方法，并使用 onMounted 钩子来检查元素，如下例所示：

<script setup>
import { ref,onMounted } from 'vue'

const input =ref()
onMounted(()=>{

  input.value.focus()
})
</script>

<template>

  <input  ref="input">
</template>

Answer 2

你可以使用 onMounted 来定位 vue 组件内的元素：

<script setup>
import { onMounted } from 'vue'

onMounted(() => {
  console.log(document.querySelector('.test'));
})
</script>

但我建议使用 ref 而不是 DOM 操作方法：

<script setup>
import { ref, onMounted } from 'vue'

const el = ref()

onMounted(() => {
  el.value // <div>
})
</script>

<template>
  <div ref="el"></div>
</template>

文档：https://vuejs.org/api/composition-api-lifecycle.html#onmounted

Answer 3

在该脚本运行

之前未呈现该组件

您想等到它安装好

<template>
  <div id="test" class="test">

  </div>
</template>


<script setup>

import { onMounted } from 'vue'; 
onMounted(() => { 
    console.log(document.querySelector('.test')) 
});
</script>

一般来说，几乎不需要在 vue 中使用像那样的 DOM 方法 - 我不会说永远不会，因为我知道一旦我这么说，就会有人想出一个有效理由

我从来没有过

如何定位 Vue 3 组件 <script setup> 内的元素？

How to target elements inside <script setup> of Vue 3 component?

javascript

vue.js

vuejs3

vue-script-setup