动态组件与组件数据缓存

Posted 2020-12-08 cuishuangshuang

1、动态组件

　　<button  @click="flag=testA">testA<button>

　　<button  @click="flag=testB">testB<button>

　　<button  @click="flag=testC">testC<button>

　　// 动态组件，is属性的值就是组件的名称

　　<component  ：is="flag"></component>

 

2、组件缓存

　　显示的组件都会缓存数据

　　　　<keep-alive>

　　　　　　<component  ：is="flag"></component>

　　　　<keep-alive>

 

　　include匹配的组件会缓存，其它组件不会缓存；表示组件testA和组件testC会缓存，其它组件都不会缓存

　　　　<keep-alive  include="testA，testC">

　　　　　　<component  ：is="flag"></component>

　　　　<keep-alive>

 

　　除了exclude匹配的组件不会缓存，其它组件都会缓存，表示除了组件testA和组件testC不会缓存数据，其它组件都会缓存

　　　　<keep-alive  exclude="testA，testC">

　　　　　　<component  ：is="flag"></component>

　　　　<keep-alive>

 

3、路由匹配缓存　

　　<keep-alive>

　　　　<router-view  />

　　<keep-alive>