vuejs官网之动态组件

有的时候，在不同组件之间进行动态切换时非常有用的，比如在一个多标签的界面里。

上述内容可以通过vue的<component>元素加一个特殊的is特性来实现，

//组件会在currentTabComponent改变时改变

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

在上述实例中，currentTabComponent可以包括

1已注册组件的名字

2一个组件的选项对象

在动态组件上使用keep-alive

我们之前曾经在一个多标签的界面中使用is特性来切换不同的组件

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

当在这些组件之间切换的时候，你有时会想保持这些组件的状态，以避免反复重渲染导致的性能问题，例如我们来展开说一说这个多标签界面

这是因为你每次切换新标签的时候，vue都创建了一个新的currentTabComponent实例

重新创建动态组件的行为通常是非常有用的

但是在这个案例中，我们更希望哪些标签的组件实例能够被在他们第一次被创建的时候缓存下来。为了解决这个问题我们可以用<keep-alive>元素将其动态组件包裹起来

<!-- 失活的组件将会被缓存！-->

<keep-alive>

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

</keep-alive>

现在这个posts标签保持了他的状态（被选中的文章）甚至当他未被渲染时也是如此。

注意这个keep-alive要求被切换到的组件都有自己的名字，不论是通过组件的name选项还是局部/全局注册