动态组件使用详解

 

<component v-bind:is="currentTabComponent"></component>

何为动态组件，如上代码所示，即利用 is 特性，来切换不同的组件，即为动态组件。

动态组件保持状态

有时候，我们希望能保持被动态加载组件的状态，已避免反复重复渲染导致的性能问题。为了能实现保持组件状态的功能，我们可以用一个 <keep-alive> 的元素将其动态组件包裹起来。

<!-- 失活的组件将会被缓存！-->
<keep-alive>
  <component v-bind:is="currentTabComponent"></component>
</keep-alive>

虽然用keep-alive会缓存组件，但是也同样带来了问题，就是当我们第二次进入页面时，组件的created和mounted函数不再触发

对于这一问题，有两个解决方案：

• 增加activated()函数,每次进入新页面的时候再获取一次数据
• 在keep-alive中增加一个过滤exclude：name（组件的name）这个方法适用于其中单个

<keep-alive exclude="name">
  <component v-bind:is="currentTabComponent"></component>
</keep-alive>

这样，我们就可以在每次进入页面的时候去初始化该页面的数据了。