Vue3 setup语法糖中使用el-tabs切换component

之前写过一篇Vue3使用el-tabs切换不同component。

当初使用的是传统的组合式API的写法，在使用了setup语法糖之后，组件就不需要再向下面那样声明了。

components: {
    Base,
    ApiKey,
    Pwd
    },

那就导致了，不能使用组件的name来切换component了，那么就让我们改造一下。

vue代码如下，el-tabs不再使用v-model双向绑定了，model-value仅仅是用来指定默认的选项卡的样式(仅仅是样式哦，功能并未实现)，需要监听tab-change事件，来改变组件的内容了。

<el-tabs model-value="Base" type="border-card" @tab-change="handleTab">
    <el-tab-pane name="Base" label="基本信息">
    </el-tab-pane>
    <el-tab-pane name="ApiKey" label="重置ApiKey"></el-tab-pane>
    <el-tab-pane name="Pwd" label="重置密码"></el-tab-pane>
    <!-- 固定高度使三个选项卡高度一致 -->
    <div style="height:240px;">
        <component v-bind:is="currentCom" @close="handleSubClose"             :ID="userID"></component>
    </div>
    </el-tabs>

ts代码如下，先import相关组件，currentCom.value = markRaw(Base)是设置默认的组件。

handleTab方法用来切换组件，这里不用使用到name，所以要通过vue内置的markRaw方法，具体说明可以查看官方网站，说实在话我也不是特别明白。

以下是有些是ts的语法，如果是js写的，去掉相关内容即可。

<script lang="ts" setup>

// 分别导入三个组件
import Base from './Base.vue'
import ApiKey from './ApiKey.vue'
import Pwd from './Pwd.vue'

const emits = defineEmits(['refush'])
const userID = ref('')
const isShow = ref(false)
const currentCom = ref()

const show = (ID: string) => {
    currentCom.value = markRaw(Base)
}

defineExpose({ // 不抛出父组件收不到此方法
    show
})

const handleTab = (name: string) => {    const lookup: {        // 为了ts不报错，声明一个索引签名
        [name: string]: any
    } =
    { Base, ApiKey, Pwd }

    currentCom.value = markRaw(lookup[name])
}