动态组件

Vue中的动态组件

1. 什么是动态组件

动态组件：动态切换组件的显示与隐藏

使用场景：需要的组件不确定时，就可以使用动态组件的方式生成，例如接收到文本数据就生成文本组件，接收到图片数据就生成图片组件。

2. 动态组件的渲染

vue提供了一个内置的< component >组件，通过is属性动态指定想要渲染的组件。

可以把< component >组件看作占位符！

3. keep-alive组件

问题：在Left组件中展示的count值++到4，切换到Right组件再切换回来就会重置为0。

原因：每一个发生组件的切换时，被隐藏的组件默认被销毁，被展示的组件默认被创建

办法：使用vue内置的 < keep-live > 组件保持动态组件的状态。

3.1 keep-alive组件用法

3.2 keep-alive组件的include属性

keep-alive组件默认会将占位符可以展示的组件都进行缓存，使用include属性可以用来指定名称匹配的组件才会被缓存

e.g. < keep-alive include=”MyLeft” >

​ < component :is=”comName” >< /component>

​ < /keep-alive>