翻译自 Dynamic Components in Vue.js
这篇文章将会教你如何使用Vue中的动态组件。当创建小型的单页应用时，这些小型应用可能并不需要vue-router来控制路由，我们只想简单地切换不同的组件来达到不同的展示效果。
Vue中的动态组件要求你指定一个挂载点，在这个挂载点下你可以动态地切换组件。在这篇教程中，我们将通过几个例子来展示如何使用动态组件。我们会创建一个动态组件，学习使用keep-alive指令参数，最后我们还会在组件的切换之间添加一些过渡效果。下面开始吧：
创建动态组件
假设我们正在为一个Blog做个简单的导航栏，我们想添加两个页面：
- 一个用于管理已经存在的博客文章
- 一个用于创建新的博客文章
稍后，我们会组件化这两个页面。现在，让我们从头一步步来吧，我们把这个简单的应用挂载到body下：
new Vue({
el: 'body'
})添加导航栏，在头部引入BootStrop 3.3.6：
Admin Panel
运行程序，我们会得到如下图所示的效果：
现在，我们这个小小的应用已经有了一个大概的结构，下面我们开始创建两个组件：一个用于管理已经存在的博客文章，一个用于创建新的博客文章。如果你还不了解如何在Vue中创建组件，建议你看看这个教程，或者看官方的教程，那里已经说得够明白了。
下面创建一个manage-posts组件，并模拟一些文章标题数据：
Vue.component('manage-posts', {
template: '#manage-template',
data: function() {
return {
posts: [
'Vue.js: The Basics',
'Vue.js Components',
'Server Side Rendering with Vue',
'Vue + Firebase'
]
}
}
})接着为组件manage-posts创建一个模板：
目前为止，我们已经有了导航栏和mange-posts组件，下面我们添加create-post组件，并把它们结合起来：
Vue.component('create-post', {
template: '#create-template'
})模板：
好了，组件都已准备完毕，下面我们进入本文重点：把这些组件制作成动态组件。
当一个用户点击Manage Posts按钮，我们想让Vue渲染manage-posts组件。同样的，当点击Create Post按钮，渲染create-post组件，
实现动态组件我们需要元素，我们把它当做动态组件的挂载点，然后在该元素上通过is属性指定我们需要渲染的组件。如此，我们可以通过下面的方式渲染manage-post组件：
效果图如下：
然而，这种硬编码的方式似乎不是所谓地动态，我们目前仍然无法通过点击不同的按钮来展示不同的组件。
聪明的你也许已经想到了Vue的数据绑定。我们只需在data中定义一个名为currentView的属性，然后再对is属性进行数据绑定就行了，很简单：
new Vue({
el: 'body',
data: {
currentView: 'manage-posts'
}
})
最后，我们再给导航栏的两个按钮添加点击事件，这样用户每次点击即不同的按钮都会改变currentView的值，从而显示不同的组件：
...
Manage Posts
Create Post
...下面是完整的代码：
keep-alive
目前我们已经知道了如何创建动态组件，下面我们说说更加重要的keep-alive。
现在当我们每次点击按钮切换组件时，旧的组件就会被销毁而新的组件会被渲染出来。
这样一来就存在一个问题，旧的组件因为被销毁从而丢失了所有的状态，当重新渲染这个组件时不得不重新调用它所需要的API来获取已经发表的文章（这里我们假设是从服务器获取文章）。为了避免这个问题，我们可以使用keep-alive指令参数来把切出去的组件保留在内存中，以保留它的状态或避免重新渲染：
在下面，我们可以验证被切出去的组件是否被保存在了内存中。我们可以在create-post组件中输入一些内容，接着切换组件，然后再切换回来。你会发现，我们输入的内容还在。
如果你的组件需要调用很多API或者渲染时需要大量的数据，那么这个指令参数会很有用。
组件间的过渡
下面，我们在组件切换间添加一些过度效果。
在组件的挂载点上，增加transition属性，我们使用简单的淡入淡出的过渡效果。
添加CSS过渡控制：
.fade-transition {
transition: opacity 0.2s ease;
}
.fade-enter, .fade-leave {
opacity: 0;
}OK了：
你可能已经注意到了transition-mode="out-in"。这个属性告诉Vue，我们希望旧的组件先淡出，然后新的组件再淡入。否则的话，就会同时出现两个组件，一个淡出一个淡入，看上去相当别扭。
结束语
希望这篇教程能使你学会如何使用动态组件。这篇教程并不是为了说明动态组件可以替代vue-router，vue-router具有更多更有用的特性。对于一些简单的组件切换，我想动态组件可能会更合适。为了构建更好的SPA我觉得你应该学习一下vue-router。
