vue3通过ref动态获取v-for元素的方法

1.ref获取单个元素的方法

<template>
    <div class="slot">
        <div ref="tabscrollBox">组件</div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
const tabscrollBox = ref<HTMLDivElement>(); 
<script>

2.ref动态获取元素的方法

<template>
    <div class="slot">
        <ul ref="tabscrollBox">
		<!-- 这里注意动态获取ref前面要加上冒号: -->
		     <li
              :ref="(el) => getTabscrollItem(el)"
              v-for="(item, index) in concertList"
              :key="index"
            >
			</li>
		</ul>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
const tabscrollBox = ref<HTMLDivElement>(); 
const tabscrollItem = ref([]); // 子元素的集合
const getTabscrollItem = (el: any) => {
  if (el) {
    (tabscrollItem.value as Array<HTMLElement>).push(el)
  }
};
// tab栏的滑动事件
const scrollleft = (i: ) => {
  let left = 0;
  tabActive.value = i;
  //ref的运用dom元素时要加as HTMLDivElement，不然会提示可能没有定义
  left = (tabscrollItem.value[i - 1] as HTMLDivElement).offsetLeft;
  (tabscrollBox.value as HTMLDivElement).scrollLeft = left;
};
<script>