vue3 设置动态 ref 并获取

<template>
  <el-tabs
    v-model="tabs.activeComp"
    type="border-card"
    class="ownCollections"
    @tab-change="tabsChange"
  >
    <el-tab-pane
      v-for="(item, key) in tabs.components"
      :key="item.name"
      :label="item.label"
      :name="item.name"
    >
      <component
        :ref="(el: refItem) => setRefMap(el, item)"
        v-bind="item.compProps"
        :is="item.component"
        @compFinish="compFinish"
      />
    </el-tab-pane>
  </el-tabs>
</template>

<script setup lang="ts">
import { ref, nextTick, reactive, type ComponentPublicInstance, onMounted } from 'vue'
import detail from './components/detail.vue'
import sellerDetails from '@/views/seller/sellerDetails.vue'
defineOptions({
  name: 'AsinIndex',
  descName: 'asin主页'
})

const tabs: any = ref({
  activeComp: 'detail',
  components: {
    detail: {
      label: 'ASIN详情',
      name: 'detail',
      component: detail
    },
    sellerDetails: {
      label: '卖家详情',
      name: 'sellerDetails',
      component: sellerDetails,
      compProps: {
        showTop: false,
        seller: {}
      }
    }
  }
})
const componentRefs = reactive<{ [key: string]: any }>({})

type refItem = Element | ComponentPublicInstance | null

const list = [{ name: 'ref1' }, { name: 'ref2' }, { name: 'ref3' }, { name: 'ref4' }]

const refMap: Record<string, refItem> = {}
const setRefMap = (el: refItem, item: { name: string }) => {
  if (el) {
    refMap[`${item.name}`] = el
  }
}

onMounted(() => {
  console.log(refMap)
})

function compFinish(record: any) {
  if (record.type === 'asinDetails') {
    tabs.value.components.sellerDetails.compProps.seller = record.seller
  }
}

async function tabsChange(activeName: any) {
  await nextTick()
  console.log('[ activeName ]-55', activeName)
  console.log('[ compRef.value ]-59', componentRefs.value)
}
</script>

<style lang="scss" scoped>
.ownCollections {
  margin-top: 64px;
  width: 100%;
  height: 100%;
  border-width: 1px 0 0 0;
  :deep(.el-tabs__content) {
    background-color: #f5f7fa;
    overflow-y: auto;
    &::-webkit-scrollbar {
      /* 隐藏滚动条 */
      width: 0; /* 隐藏滚动条宽度 */
    }
  }

  :deep(.el-tabs__header .is-top) {
    background-color: #fff;
    .el-tabs__item {
      border: 2px solid transparent;
    }
    .el-tabs__item.is-active {
      background-color: #f5f7fa;
      border-top: 2px solid var(--el-color-primary);
    }
  }
}
</style>