vue3组合式api中的动态组件使用？ - larry

<template>
  <div class="app-container">
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="学员信息" name="StudentInfo" />
      <el-tab-pane label="学期信息" name="TermInfo" />
      <el-tab-pane label="视频管理" name="VideoMange" />
      <el-tab-pane label="账号管理" name="AccountMange" />
      <el-tab-pane label="功能权限" name="Permission" />
    </el-tabs>
    <component :is="components[activeName]" :id="id" />
  </div>
</template>


<script setup lang="ts">
import type { TabsPaneContext } from "element-plus";
import StudentInfo from "./components/StudentInfo/index.vue";
import TermInfo from "./components/TermInfo/index.vue";
import VideoMange from "./components/VideoMange/index.vue";
import AccountMange from "./components/AccountMange/index.vue";
import Permission from "./components/Permission/index.vue";

const props = defineProps(["id"]);

const components = {
  StudentInfo,
  TermInfo,
  VideoMange,
  AccountMange,
  Permission,
};

const activeName = ref<keyof typeof components>("StudentInfo");

const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(activeName.value, "activeName");
};
function setActiveName(val: keyof typeof components) {
  activeName.value = val;
}
defineExpose({
  setActiveName,
});
</script>

<style scoped lang="scss">
.app-container {
  margin-top: -10px;
  padding-top: 0;
}
</style>