正常情况,我们需要在vue中获得某个dom或者组件,我们会通过先绑定ref然后在通过绑定后的名字来获取这个dom。
但是,如果我们在v-for中绑定ref的话,那么这个ref就会存在多个,比如我们点击事件让对应的显示/隐藏的话,我们很难找到这个对应的元素,
这时我们就需要动态绑定这个ref(比如ref1, ref2,ref3等等),那么我们可以通过如下代码实现
// vue3
<script setup lang="ts">
const myRefs = ref(<any>{})
const getRefs = (el: any) => {
if ((el && el.$attrs['name'] >= 0) || (el && el.$attrs['name'])) {
myRefs[el.$attrs['name']] = el
}
}
// 通过 myRefs['div:序号'] 获取ref
let index = 1
myRefs[`ref:${index}`]
</script>
<template>
<div v-for="i in 10">
<div :name="'ref:'+i" :ref="getRefs"></div>
</div>
</template>