模板引用（Template Refs）全解析2

三、v-for 中的模板引用

当在 v-for 中使用模板引用时，引用的 value 会自动变为一个数组，包含列表中所有元素/组件的引用（需 Vue 3.5+ 版本，旧版需手动处理且顺序不保证）。

1. 基本用法（Vue 3.5+）

<script setup>
import { ref, useTemplateRef, onMounted } from 'vue'// 源数据列表
const list = ref(['Item 1', 'Item 2', 'Item 3'])// 声明对列表元素的引用：参数与模板中 ref 的值一致
const itemRefs = useTemplateRef('items')onMounted(() => {// itemRefs.value 是一个数组，顺序与源数据列表一致console.log('列表元素引用：', itemRefs.value) // [li元素1, li元素2, li元素3]
})
</script><template><ul><!-- v-for 循环中添加 ref 属性，所有元素共用一个 ref 值 "items" --><li v-for="item in list" ref="items">{{ item }}</li></ul>
&