vue3实现vfor里面的动态ref

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

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

• 1
• 2
• 3
• 4
• 5
• 6
• 7

setup里面

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

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

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

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

• 1
• 2
• 3
• 4
• 5
• 6

就实现了我想要的的效果