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 原生实现右键菜单组件功能，本文给大家扩展知识点vue点击菜单以外区域，隐藏菜单操作，通过实例代码给大家介绍的非常详细,需要的朋友可以参考下2019-12-12
这篇文章主要介绍了Vue3项目刚创建就报错的问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
本文主要介绍了vue集成高德地图amap-jsapi-loader的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-06-06
今天小编就为大家分享一篇对vue中v-on绑定自定事件的实例讲解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
下面小编就为大家分享一篇vue.js2.0点击获取自己的属性和jquery方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
这篇文章主要介绍了Vue中inheritAttrs的使用实例详解,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-12-12
这篇文章主要介绍了详解基于vue-cli3.0如何构建功能完善的前端架子，本文整合出具备基础功能的前端架子，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-10-10
这篇文章主要介绍了vue 自定义指令directives及其常用钩子函数说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-01-01
这篇文章主要介绍了仿vue-cli搭建属于自己的脚手架的方法步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
这篇文章主要介绍了vue组件中传值EventBus的使用及注意事项说明，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
最新评论