Vue3中setup语法糖使用component切换组件的实现

在element-plus中，使用el-tab动态切换组件是一个非常不错的方案，在项目中也常见。

之前没有使用setup语法糖的时候，可以这样实现。

<el-tabs v-model="currentTabName" type="border-card" @tab-click="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="currentTabName" @close="handleSubClose" :ID="userID"></component>
    </div>
</el-tabs>

JS代码如下：

<script>
    import {
        defineComponent,
        reactive,
        toRefs
    } from 'vue'
    // 分别导入三个组件
    import Base from './Base.vue'
    import ApiKey from './ApiKey.vue'
    import Pwd from './Pwd.vue'
    export default defineComponent({
        name: 'EditUser',
        emits: ['refush'],
        components: {
            Base,
            ApiKey,
            Pwd
    }    ......省略

切换tab时，绑定currentTabName值，然后component通过绑定currentTabName动态切换组件。

但是使用了setup语法糖之后，就不需要定义components对象了，官方说话如下：

由于组件被引用为变量而不是作为字符串键来注册的，在

 <script setup>

 中要使用动态组件的时候，就应该使用动态的 :is来绑定：

官方链接

那我们只要简单改造一下即可。

模版代码如下：

<component :is="typeComponentMap[currentTabName]" @close="handleSubClose" :ID="userID"></component>

ts代码如下：

<script lang="ts" setup>
import {
    defineEmits,
    ref
} from 'vue'
// 分别导入三个组件
import Base from './Base.vue'
import ApiKey from './ApiKey.vue'
import Pwd from './Pwd.vue'
const typeComponentMap = {
    Base: Base,
    ApiKey: ApiKey,
    Pwd: Pwd
}
//name: 'EditUser',
const emits = defineEmits(['refush'])

const currentTabName=ref('Base')

至此，即可以完美实现标签页切换，效果如下：