需求是一个form表单切割成三部分，填完一部分可点击下一步继续填写下一部分，全部都完成后点击提交按钮，进行各部分的表单验证，如果验证没问题可提交。

以下代码没有满足我的需求，仅仅是获取到了子组件传来的值。

<template><el-container class="bg-white"><el-header height="40px" class="AddHeader"><span v-for="(item,index) in steps" @click="changeComp(index)" :class="{'xxk-active':compIndex == index}">{{ item.title }}</span></el-header><el-main><KeepAlive><component :ref="(el: refItem) => setRefMap(el, steps[compIndex].comp)":is="compNames[steps[compIndex].comp]"/></KeepAlive></el-main><el-footer height="32px"><div class="footerBtn el-button-long"><el-button @click="prevBtn" v-show="compIndex">上一步</el-button><el-button type="primary" @click="nextBtn">{{compIndex == 2 ? '提交': '下一步'}}</el-button></div></el-footer></el-container>
</template><script setup lang="ts">
import GeneratedCode from './components/GeneratedCode.vue'
import Configuration from './components/Configuration.vue'
import Setting from './components/Setting.vue'// 组件切换
const steps = [{ title: 'oneForm', comp: 'GeneratedCode' },{ title: 'twoForm', comp: 'Configuration'},{ title: 'threeForm', comp: 'Setting'}]// 当前组件index
const compIndex = ref(0)
type compName = {[key:string]:any
}
const compNames = shallowReactive<compName>({ GeneratedCode, Configuration, Setting })//设置动态组件ref
const refMap: Record<string, refItem> = {}
type refItem = Element | ComponentPublicInstance | null
const setRefMap = (el: refItem, item: string ) => {el && (refMap[`${item}`] = el)
}
// 切换组件
const changeComp = (index: number) => {compIndex.value = index
}// 上一步
const prevBtn = () => {compIndex.value -= 1 
}// 下一步/提交按钮
const nextBtn = async () => {if (!(compIndex.value < 2 && (compIndex.value += 1))) {console.log(refMap['GeneratedCode'])console.log(refMap['Configuration'])console.log(refMap['Setting'])}
}</script>
<style lang="scss" scoped>
.AddHeader{span{cursor: pointer;}
}
.xxk-active{color:#296EFF;font-size: 18px;font-weight: 600;
}
</style>