Vue - 如何使用组合的动态引用 API

Question

我在 Vue 3 中使用组合 API 并想定义一个组件的引用。 通常这将通过将ref="name"添加到模板然后定义一个具有相同名称的 ref 来完成： const name = ref(null) 。 问题是我想使用动态引用名称。 知道如何解决这个问题吗？

在选项 API 中，我可以这样做： :ref=" name${x} "然后在代码中访问它： this.$refs[ name${x} ] 。 但是对于组合 API，我无权访问 $refs。 有没有办法在不使用模板引用中的 function 的情况下执行此操作？

Answer 1

:ref属性接受 function（参见文档），您可以使用它来将其分配给您想要的变量：

<script setup>
const dynamicRef = ref(null);
</script>

<template>
  <Count :ref="(el) => dynamicRef = el" />
</template>

Vue 游乐场示例

Answer 2

我想v-for 中的 Refs更适合您要实现的目标。

需要 Vue v3.2.25 或以上版本

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

const list = ref([1, 2, 3])

const itemRefs = ref([])

onMounted(() => {
  alert(itemRefs.value.map(i => i.textContent))
})
</script>

<template>
  <ul>
    <li v-for="item in list" ref="itemRefs">
      {{ item }}
    </li>
  </ul>
</template>

Vue SFC 游乐场