vue3中获取ref元素的几种方式总结

最近开发了一个PC端的新项目，其中有一个这样的需求，点击表单中已上传的图片（这一栏中可以上传多张图片），进行预览时，会出现一个轮播图的效果，显示当前点击的图片，点击左右滑动，可以预览上一张或者下一张。因为要实现点击哪一张，就显示哪一张的效果，所以在轮播图中需要给它设置当前的图片的name，这样才会展示当前图片，这个时候就用到了ref来获取轮播图的元素。

1、ref获取单个dom元素：

<template>
   <div ref='divDom'></div> 
</template>
<script setup>
const divDom = ref(null);
onMounted(()=>{
    
    
    console.log('获取dom元素',divDom)
})

2、ref获取v-for循环中的dom元素：

<template>
   <div ref='getDivDom' v-for="item in list" :data-id="item.id"></div> 
</template>
<script setup>
const divDomList = ref(new Map());

const getDivDom = el=>{
    
    
    if(el){
    
    
        divDomList.set(el.dataset['id'],el) 
    }
}

// const el =divDomList.get(id) // 根据list数据中的id值 获取对应的dom元素 

或者使用下面的方法（我就是使用的下面这个方法）

<template>
   <div ref='getDivDom' :ref="(el) => getDivDom(el, item)" v-for="item in list"></div> 
</template>
<script setup>
const divDomList = ref(new Map());

const getDivDom = (el,item)=>{
    
    
    if(el){
    
    
        divDomList.set(item.id, el) 
    }
}

// const el =divDomList.get(id) // 根据list数据中的id值 获取对应的dom元素

这是我使用上述方法后的代码：

<template>
   <!-- 轮播图效果 -->
   <el-carousel
     arrow="always"
     :autoplay="false"
     @change="handlecar"
     :v-if="imgList.length > 0"
     :ref="(el) => getCarou(el, tab.id)"
     :data-id="tab.ruleId"
   >
      <el-carousel-item
         v-for="(item, index) in imgList"
         :key="index"
         :name="item.id"
         style="text-align: center"
      >
         <img :src="item.url" alt="" />
     </el-carousel-item>
  </el-carousel> 
</template>
<script setup>
const divDomList = ref(new Map());

//获取轮播元素
const getCarou = (el, id) => {
    
    
    if (el) {
    
    
        divDomList.value.set(id, el);
    }
};

//手动切换轮播图
const setActiveItem = (i, id) => {
    
    
    nextTick(() => {
    
    
        if (divDomList.value.get(id)) {
    
    
            divDomList.value.get(id).setActiveItem(i);
        }
    });
};