父组件模板：
<my-component>
<p>This is some original content</p>
<p>This is some more original content</p>
</my-component>
渲染结果：
<div> <h1>This is my component!</h1> <p>This is some original content</p> <p>This is some more original content</p> </div>
具名 Slot
<slot> 元素可以用一个特殊特性 name 配置如何分发内容。多个 slot 可以有不同的名字。具名 slot 将匹配内容片段中有对应 slot 特性的元素。
仍然可以有一个匿名 slot，它是默认 slot，作为找不到匹配的内容片段的回退插槽。如果没有默认的 slot，这些找不到匹配的内容片段将被抛弃。
例如，假定我们有一个 multi-insertion 组件，它的模板为：
<div> <slot></slot> <slot></slot> <slot></slot> </div>
父组件模板：
<multi-insertion> <p slot="one">One</p> <p slot="two">Two</p> <p>Default A</p> </multi-insertion>
渲染结果为：
<div> <p slot="one">One</p> <p>Default A</p> <p slot="two">Two</p> </div>
在组合组件时，内容分发 API 是非常有用的机制。
动态组件
多个组件可以使用同一个挂载点，然后动态地在它们之间切换。使用保留的 <component> 元素，动态地绑定到它的 is 特性：
new Vue({ el: 'body', data: { currentView: 'home' }, components: { home: { /* ... */ }, posts: { /* ... */ }, archive: { /* ... */ } } }) <component :is="currentView"> <!-- 组件在 vm.currentview 变化时改变 --> </component>
keep-alive
如果把切换出去的组件保留在内存中，可以保留它的状态或避免重新渲染。为此可以添加一个 keep-alive 指令参数：
<component :is="currentView" keep-alive>
<!-- 非活动组件将被缓存 -->
</component>
activate 钩子
在切换组件时，切入组件在切入前可能需要进行一些异步操作。为了控制组件切换时长，给切入组件添加 activate 钩子：
Vue.component('activate-example', { activate: function (done) { var self = this loadDataAsync(function (data) { self.someData = data done() }) } })
注意 `activate` 钩子只作用于动态组件切换或静态组件初始化渲染的过程中，不作用于使用实例方法手工插入的过程中。
transition-mode
transition-mode 特性用于指定两个动态组件之间如何过渡。
在默认情况下，进入与离开平滑地过渡。这个特性可以指定另外两种模式：
•in-out：新组件先过渡进入，等它的过渡完成之后当前组件过渡出去。
•out-in：当前组件先过渡出去，等它的过渡完成之后新组件过渡进入。
示例：
<!-- 先淡出再淡入 --> <component :is="view" transition="fade" transition-mode="out-in"> </component> .fade-transition { transition: opacity .3s ease; } .fade-enter, .fade-leave { opacity: 0; }
杂项
组件和 v-for
自定义组件可以像普通元素一样直接使用 v-for：
<my-component v-for="item in items"></my-component>
但是，不能传递数据给组件，因为组件的作用域是孤立的。为了传递数据给组件，应当使用 props：
<my-component
v-for="item in items"
:item="item"
:index="$index">
</my-component>
不自动把 item 注入组件的原因是这会导致组件跟当前 v-for 紧密耦合。显式声明数据来自哪里可以让组件复用在其它地方。
编写可复用组件
在编写组件时，记住是否要复用组件有好处。一次性组件跟其它组件紧密耦合没关系，但是可复用组件应当定义一个清晰的公开接口。
Vue.js 组件 API 来自三部分——prop，事件和 slot：
•prop 允许外部环境传递数据给组件；
•事件 允许组件触发外部环境的 action；
•slot 允许外部环境插入内容到组件的视图结构内。
使用 v-bind 和 v-on 的简写语法，模板的缩进清楚且简洁：