vue---keep-alive动态组件渲染＜component :is=‘组件名‘＞＜/component＞

<template>
  <div>
    <Card>
      <Tabs @on-click="handleTabClick">
        <TabPane
          v-for="(item, index) in componentList"
          :key="index"
          icon="logo-freebsd-devil"
          :label="item"
        ></TabPane>
      </Tabs>
      <keep-alive>
        <component :is="componentList[currentTab]"></component>
      </keep-alive>
    </Card>
  </div>
</template>
<script>
import Descriptor from "./Descriptor/index.vue";
import PyConverter from "./PyConverter/index.vue";
import TaskList from "./TaskList/index.vue";
export default {
  name: "test_page",
  components: {
    Descriptor,
    PyConverter,
    TaskList,
  },
  data() {
    return {
      currentTab: 0,
      componentList: ["Descriptor", "PyConverter", "TaskList"],
    };
  },
  created() {},
  computed: {},
  methods: {
    handleTabClick(name) {
      console.log(name);
      this.currentTab = name;
    },
  },
};
</script>
<style lang="scoped"></style>