vue3中ref动态绑定的技巧详解
作者：梁青竹
这篇文章主要为大家详细介绍了vue3中ref动态绑定的相关技巧,文中的示例代码讲解详细,具有一定的借鉴价值,感兴趣的小伙伴可以了解一下
平常时候绑定ref
<script> const tempRef = ref<HTMLElement>() </script> <template> <div ref='tempRef'></div> </template>
在一些场景需要动态绑定ref， ref设置是未知的需要根据动态数据来决定，那么我们需要定义一个对象进行存储绑定的ref，例：
<script>
interface DataItem {
id:string,
name:string
}
const dataList:DataItem[] = [
{
id="1",
name:'标题1'
},
{
id="2",
name:'标题2'
},
{
id="3",
name:'标题3'
}
]
const tempRefs = ref({} as any);
const handleSetTempMap = (el: Element, item: DataItem)=>{
if (el) {
tempRefs.value[`temp_{item.id}`] = el;
}
}
</script>
<template>
<div v-for="item in dataList" :key="item.id"
:ref="(el:Element) => handleSetTempMap(el, item)"
>
</div>
</template>
到此这篇关于vue3中ref动态绑定的技巧详解的文章就介绍到这了,更多相关vue3 ref动态绑定内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！