vue3中ref动态绑定的技巧详解
更新时间：2024年01月14日 11:24:48 作者：梁青竹
这篇文章主要为大家详细介绍了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动态绑定内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了vue proxy 的优势与使用场景实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-06-06
这篇文章给大家介绍了Vue3监听store中数据变化的三种方法,使用watch和storeToRefs函数,使用计算属性computed和使用watchEffect函数这三种方法,文中通过代码讲解非常详细,需要的朋友可以参考下2024-01-01
这篇文章主要介绍了Hooks时代中如何写出高质量的react和vue组件的示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
这篇文章主要介绍vue.js Router嵌套路由,平时访问首页,里面有新闻类的/home/news,还有信息类的/home/message这时候就需要使用到嵌套路由,下面我们就来具体学习嵌套路由的原理,需要的朋友可以参考一下2021-10-10
这篇文章主要为大家详细介绍了vue封装一个日历组件的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
这篇文章主要为大家详细介绍了vue动态组件实现选项卡切换效果的相关资料，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-03-03
这篇文章主要介绍了vue 做移动端微信公众号采坑经验记录,文中是小编记录的三个坑及解决方案，需要的朋友可以参考下2018-04-04
这篇文章主要介绍了vscode配置vue下的es6规范自动格式化详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-03-03
这篇文章主要介绍了vue中vue-cli项目报错sockjs.js报错问题，具有很好的参考价值，希望对大家有所帮助。2022-12-12
在Vue的开发中，一旦我们用到对话框，经常出现的问题是对话框被遮罩层挡住,怎么来解决这个问题呢？下面小编给大家带来了Vue开发中对话框被遮罩层挡住的问题及解决方法，一起看看吧2018-11-11
最新评论