Skip to content

动态组件

根据变量动态展示组件

语法:

import Test1 from "./components/dynamicComponents/test1" componentName: 'Test1'

componentName是在data中声明的变量,类型是一个字符串(组件的name)。

动态组件的应用

  • 在制作Tab功能时可以应用

点击tab展示不同组件

动态组件的缓存

  • 在tab切换的场景可以配合<keep-alive>标签包裹达到缓存的目的

注意

include - 数组、字符串或正则表达,只有匹配的组件会被缓存【配合vue-router的meta路由元信息使用】

exclude - 字符串或正则表达式,任何匹配的组件都不会被缓存

html
<transition appear name="fade" mode="out-in">
    <keep-alive :include=""['components1','component2'']"" >
        <!-- <router-view > </router-view> -->
        <component :is="componentName"></component>
    </keep-alive>
</transition>