Vue的组件有好多种，在实际运用中，根据不同的需求，可以使用不同的类型，系统的学习一下：
- component 组件
- transition 组件
- transition-group 组件
- keep-alive 组件
- slot 组件
component
最标准的组件类型，支持两个基础属性 is 和 inline-template
<component v-bind:is="currentView">
<!-- 组件在 vm.currentview 变化时改变！ -->
</component>
<my-component inline-template>
<div>
<p>These are compiled as the component's own template.</p>
<p>Not parent's transclusion content.</p>
<!-- 官方不建议把 template 这么写，写在 template 属性里面或者 .vue -->
</div>
</my-component>
transition & transition-group
为组件的载入和切换提供动画效果，具有非常强的可定制性，支持16个属性和12个事件，在具体使用的时候可以细细研究，这是详细的文档：
https://vuejs.org/v2/guide/transitions.html
keep-alive
针对组件的缓存问题而设计的，有 include 和 exclude 两个参数进行正则判断是否启用缓存
<!-- basic -->
<keep-alive>
<component :is="view"></component>
</keep-alive>
<!-- multiple conditional children -->
<keep-alive>
<comp-a v-if="a > 1"></comp-a><!-- 只有 a > 1 是才进行缓存 -->
<comp-b v-else></comp-b>
</keep-alive>
<!-- Array (use `v-bind`) -->
<keep-alive :include="['a', 'b']">
<component :is="view"></component>
</keep-alive>
slot
为父组件留空的一种机制，在<slot></slot>中会插入父组件模板中的相应值，如果父组件中没有值，则显示 <slot></slot> 中的默认值
Suppose we have a component called my-component with the following template:
<div>
<h2>I'm the child title</h2>
<slot>
This will only be displayed if there is no content
to be distributed.
</slot>
</div>
And a parent that uses the component:
<div>
<h1>I'm the parent title</h1>
<my-component>
<p>This is some original content</p>
<p>This is some more original content</p>
</my-component>
</div>
The rendered result will be:
<div>
<h1>I'm the parent title</h1>
<div>
<h2>I'm the child title</h2>
<p>This is some original content</p>
<p>This is some more original content</p>
</div>
</div>
Slot 的功能可以进一步的加强到：
- 如果子组件有多个 slot，则用 name 属性指定位置，称为Named Slot
- 也可以给 slot 中传值，这种 slot 称为 Scoped Slot
具体可以查看官方文档：
https://vuejs.org/v2/guide/components.html#Named-Slots
https://vuejs.org/v2/guide/components.html#Scoped-Slots
