Vue3使用el-tabs切换不同component

2022.6.9更新了，在setup语法糖下实现的方法，传送点击这里。

使用element-plus开发后台管理程序，通过tab切换不同选项卡来切换不同组件，这是非常常见的，这里就简单记录一下实现方法，话不多说，先看效果。

父组件代码如下：

<template>
    <!-- 加上:close-on-click-modal="false"关闭时则会把表单内的数据清空重置 -->
    <el-dialog :destroy-on-close="true" @close="handleCloseDialog" v-model="isShow" :close-on-click-modal="false"
        width="30%" center>
    <!-- v-model绑定组件名字，同时也是当前el-tab-pane当前的选项 -->
    <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自定义组件，传递ID属性，并且监听close方法 -->
            <!-- 每个组件都需要传递userID属性，都会发出close事件 -->
            <component v-bind:is="currentTabName" @close="handleSubClose" :ID="userID"></component>
        </div>
    </el-tabs>
    </el-dialog>
</template>

然后要导入这三个组件：

import Base from './Base.vue'
import ApiKey from './ApiKey.vue'
import Pwd from './Pwd.vue'

注册组件：

components: {
    Base,
    ApiKey,
    Pwd
},

定义一个属性：

const state = reactive({
    userID: '',
    isShow: false,
    // 默认组件，显示第一个组件
    currentTabName: 'Base'
})

至此就能实现不同组件之间的切换了。