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

【问题标题】：How to target elements inside <script setup> of Vue 3 component?如何定位 Vue 3 组件的 <script setup> 内的元素？
【发布时间】：2022-09-25 14:53:49
【问题描述】：

如何在此 vue 组件中使用 test 类定位元素：

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

  </div>
</template>


<script setup>

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

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

该组件可能在该脚本运行之前未呈现 - 您将要使用 import { onMounted } from \'vue\'; onMounted(() => { console.log(document.querySelector(\'.test\')) }
就是这样！您要发布答案吗？

标签： javascript vue.js vuejs3 vue-composition-api vue-script-setup

【解决方案1】：

在该脚本运行之前组件未呈现

你想等到它被挂载

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

  </div>
</template>


<script setup>

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

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

我从来没有

【讨论】：

【解决方案2】：

最佳实践是使用 ref 而不是 DOM 操作方法，并且还使用 onMounted 钩子来检查元素，如下例中所述：

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

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

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

<template>

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

【讨论】：

【解决方案3】：

您可以使用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

【讨论】：