动态化组件

多个组件可以使用同一个挂载点，然后动态地在它们之间切换。使用保留的 <component> 元素，动态地绑定到它的 is 特性：

new Vue({
    el : 'body',
    data : {
        currentView : 'home'
    },
    components : {
        home : { /* ... */ },
        posts : { /* ... */ },
        archive : { /* ... */ }
    }
})
复制代码

<component :is="currentView">
    <!-- 组件在 vm.currentview 变化时改变 -->
</component>
复制代码

如果把切换出去的组件保留在内存中，可以保留它的状态或避免重新渲染。为此可以添加一个 keep-alive 指令参数：

<component :is="currentView" keep-alive>
    <!-- 非活动组件将被缓存 -->
</component>
复制代码

其他动态组件的详细介绍，请参考：动态组件

动态组件&异步组件

在创建复杂应用的时候，动态组件或许就显得不那么灵活了，这时可以使用路由，vue-router路由扩展可以看做是动态组件的升级版。