动态组件
根据变量动态展示组件
语法:
import Test1 from "./components/dynamicComponents/test1" componentName: 'Test1'
componentName是在data中声明的变量,类型是一个字符串(组件的name)。
动态组件的应用
- 在制作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>