vue3中ref动态绑定【技巧】

平常时候绑定ref

xml 复制代码
<script>
const tempRef = ref<HTMLElement>()
</script>
<template>
<div ref='tempRef'></div>
</template>

在一些场景需要动态绑定ref, ref设置是未知的需要根据动态数据来决定,那么我们需要定义一个对象进行存储绑定的ref,例:

typescript 复制代码
<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>
相关推荐
pe7er24 分钟前
使用 Vue 官方脚手架创建项目时遇到 Node 18 报错问题的排查与解决
前端·javascript·vue.js
pe7er31 分钟前
使用 types / typings 实现全局 TypeScript 类型定义,无需 import/export
前端·javascript·vue.js
蓝胖子的多啦A梦1 小时前
Vue+element 日期时间组件选择器精确到分钟,禁止选秒的配置
前端·javascript·vue.js·elementui·时间选选择器·样式修改
海天胜景2 小时前
vue3 el-table 列增加 自定义排序逻辑
javascript·vue.js·elementui
用户3802258598242 小时前
vue3源码解析:diff算法之patchChildren函数分析
前端·vue.js
源码站~3 小时前
基于Flask+Vue的豆瓣音乐分析与推荐系统
vue.js·python·flask·毕业设计·毕设·校园·豆瓣音乐
江城开朗的豌豆3 小时前
路由守卫通关秘籍:这些钩子函数让你的页面跳转稳如老狗!
前端·javascript·vue.js
加减法原则3 小时前
Vue 模板引用(ref)全面指南:从基础到高级应用
vue.js
sunbyte3 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | DragNDrop(拖拽占用组件)
前端·javascript·css·vue.js·vue
快起来别睡了3 小时前
Vue 响应式系统与 `computed` 属性详解:小白也能学会的完整指南
vue.js