来自vue官方的文档说明
ps:之前的 vue2
中的 v-for
循环动态绑定 ref
的用法(可使用 $refs
获取节点数组)在 vue3
中不再支持
以下为 vue3
中的用法
v-for
中使用
组合式 API
模板引用在 v-for
内部使用时没有特殊处理。相反,请使用函数引用执行自定义处理:
<template>
<div v-for="(item, i) in list" :ref="el => { if (el) divs[i] = el }">
{{ item }}
</div>
</template>
<script>
import { ref, reactive, onBeforeUpdate } from 'vue'
export default {
setup() {
const list = reactive([1, 2, 3])
const divs = ref([])
// 确保在每次更新之前重置ref
onBeforeUpdate(() => {
divs.value = []
})
return {
list,
divs
}
}
}
</script>
最后附上vue模板引用官方说明