动态组件
一、App.vue
<template>
<ul> <!-- 使用ul标签替代了错误的url标签，用于展示列表 -->
<li v-for='(item, index) in tabList' :key='index'> <!-- 使用v-for指令遍历tabList数组，生成列表项，其中item是当前遍历的元素，index是索引 -->
{{ item.name }} <!-- 使用双大括号插值表达式展示item的name属性 -->
</li>
</ul>
<component :is="currentComponent.com"></component>
<!-- :is 是一个特殊的属性，用于动态地绑定一个组件到其标签名。根据currentComponent.com的值来决定具体渲染哪个组件 -->
</template>
<script setup lang="ts">
import { reactive } from 'vue'; // 引入vue的reactive API，用于创建响应式对象
import A from './components/A.vue'; // 引入A组件
import B from './components/B.vue'; // 引入B组件
import C from './components/C.vue'; // 引入C组件
import { DefineComponent } from 'vue'; // 引入DefineComponent类型，用于更精确地定义组件类型
interface TabItem { // 定义TabItem接口，用于约定tabList中对象的结构
name: string; // name属性是字符串类型
com: DefineComponent<any, any, any>; // com属性是一个组件类型，这里使用any是为了简化，实际使用时需要具体定义组件的props、emits等类型
}
let tabList = reactive<TabItem[]>([ // 创建响应式对象tabList，它的类型是TabItem数组
{ name: 'A准备好面试题', com: A }, // 数组的第一个元素，name是字符串，com是A组件
{ name: 'B准备简历', com: B }, // 数组的第二个元素，name是字符串，com是B组件
{ name: 'C准备面试', com: C } // 数组的第三个元素，name是字符串，com是C组件
]);
let currentComponent = reactive<any>({ com: tabList[0].com }); // 创建响应式对象currentComponent，它的类型是any，初始时com属性指向tabList的第一个元素的com属性，即A组件
</script>
二、components
A.vue:
<!--子组件: A 组件-->
<template>
<div>
<h1>A组件</h1>
</div>
</template>
B.vue:
<!--子组件: B 组件-->
<template>
<div>
<h1>B组件</h1>
</div>
</template>
C.vue:
<!--子组件: C 组件-->
<template>
<div>
<h1>C组件</h1>
</div>
</template>