vue3实现vfor里面的动态ref

vue3里面$refs已经不支持了，现在需要在tab下面实现这种ref获取组件实例的需求，官网给出的方案，需要vue的版本在3.2.25，默默的看看下自己的版本在3.2.20欲哭无泪，尝试了好久，找到了解决方案

 <a-tabs v-model:activeKey="activeKey" v-if="tabComponents && tabComponents.length > 0">
            <a-tab-pane v-for="(item, index) in tabComponents" :key="index + 1" :tab="item.describe" :ref="tableRef">
                <JVxeTable :ref="(el) => setItemRef(el, item.key)" stripe toolbar rowNumber rowSelection resizable
                    keepSource :maxHeight="300" :checkbox-config="{ range: true }" :loading="jvxData.loading"
                    :columns="item.columns" :dataSource="item.dataSource"></JVxeTable>
            </a-tab-pane>
</a-tabs>

setup里面

    let tabListData = {}
    function setItemRef(el, key) {
	    //处理JVxeTable里面输入的数据
	    if (el) {
	        tabListData[key] = el
	    }
	    console.log(el, 'tableRef--el')
	    console.log(tabListData, 'tableRef')
	}

最后再提交数据的时候,获取到所有tab里面的组件的数据

 //获取所有的table数据
    let tableData: any[] = []
    for (let key in tabListData) {
        tableData.push({ [key]: tabListData[key].getTableData() })
    }
    console.log(tableData, 'tableData')

就实现了我想要的的效果