简单的说，动态组件就是将几个组件放在一个挂载点下，这个挂载点就是标签，其需要绑定is属性，属性值为父组件中的变量，变量对应的值为要挂载的组件的组件名，然后根据父组件里某个变量来动态显示哪个，也可以都不显示，如:
<template> <div class="home"> <component :is="currentComponent"></component> </div></template><script>import Tab0 from "@/components/Tab0.vue";import Tab1 from "@/components/Tab1.vue";export default { data: () => { return { currentIndex: 0 // 通过改变currentIndex改变要挂载的组件名 } }, components: { "tab-0": Tab0, "tab-1": Tab1 } currentComponent() { // 动态计算要挂载的组件的组件名 return `tab-${this.currentIndex}`; // "tab-0" 、"tab-1" }}</script> 缓存<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 相似， 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中可以将动态组件放到组件内对动态组件进行缓存，这样动态组件进行切换的时候，就不会每次都重新创建了。 <template> <div class="home"> <keep-alive> <component :is="currentComponent"></component> </keep-alive> </div></template>