Vue 中如何为多个元素设置 ref 并获取它们的数组？

vue.js

2024-03-15 17:31:28

## 为多个元素设置 ref 的优化指南

### 问题概述

在 Vue 中，设置 ref 属性可以让你访问特定 DOM 元素。但是，当为多个元素设置相同的 ref 值时，$refs 属性会返回第一个匹配的元素，而不是数组。本文将探讨如何为多个元素设置 ref 并获取它们的数组。

### 解决方案

有两种方法可以为多个元素设置 ref 并获取它们的数组：

### 方法 1：使用数组作为 ref 值

使用数组作为 ref 值可以返回一个包含所有匹配元素的数组。

<template>
  <div class="container">
    <div ref="elements[0]">Element 1</div>
    <div ref="elements[1]">Element 2</div>
    <div ref="elements[2]">Element 3</div>
  </div>
</template>

<script>
  export default {
    mounted() {
      const elements = this.$refs.elements;
      console.log(elements); // 输出：Array [div, div, div]
    },
  };
</script>

### 方法 2：使用带有 key 的 v-for 循环

带有 key 的 v-for 循环可以为每个元素生成唯一的 ref 值。

<template>
  <div class="container">
    <div v-for="i in 3" :key="i" ref="elements">Element {{ i }}</div>
  </div>
</template>

<script>
  export default {
    mounted() {
      const elements = this.$refs.elements;
      console.log(elements); // 输出：Array [div, div, div]
    },
  };
</script>