敲黑板！Vue3+TSX/JSX+Setup中获取多个DOM的终极秘籍

2023-07-29 00:25:20

Vue 3 多 DOM 获取秘籍：揭秘 ref 和 setup 协作的力量

简介

在 Vue 3 的世界中，利用 TSX/JSX 和 Setup 语法糖，获取多个 DOM 元素可能是一项艰巨的任务。然而，有了 ref 属性和 setup 函数的强大组合，这一切都将变得轻而易举。本文将深入探究这项技巧，并通过详细的示例代码带你步步揭开谜底，助力你提升 Vue 3 开发效率。

ref 属性：获取 DOM 元素的钥匙

ref 属性是 Vue 3 中获取 DOM 元素的关键。它允许你在模板中为 DOM 元素指定一个唯一的标识符。稍后，你可以在脚本中使用该标识符访问对应的 DOM 元素。

setup 函数：初始化组件状态的舞台

setup 函数是一个在 Vue 3 中用于初始化组件状态和方法的函数。它让你可以在组件中使用 ref 属性来获取 DOM 元素。

ref 和 setup 的完美结合

将 ref 属性与 setup 函数结合使用，你就可以在模板中指定一个 DOM 元素的唯一标识符，然后在 setup 函数中通过该标识符获取它。

代码示例：获取单个 DOM 元素

<template>
  <div ref="myDiv">
    Hello World!
  </div>
</template>

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

export default {
  setup() {
    const myDiv = ref(null);

    onMounted(() => {
      console.log(myDiv.value); // 输出：<div ref="myDiv">Hello World!</div>
    });

    return {
      myDiv,
    };
  },
};
</script>

获取多个 DOM 元素

如果你想获取多个 DOM 元素，可以使用数组来存储 ref 属性。

代码示例：获取多个 DOM 元素

<template>
  <div ref="myDivs">
    <div>Div 1</div>
    <div>Div 2</div>
    <div>Div 3</div>
  </div>
</template>

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

export default {
  setup() {
    const myDivs = ref([]);

    onMounted(() => {
      console.log(myDivs.value); // 输出：[<div>Div 1</div>, <div>Div 2</div>, <div>Div 3</div>]
    });

    return {
      myDivs,
    };
  },
};
</script>