介绍
为了让组件可以组合，我们需要一种方式来混合父组件的内容与子组件自己的模板。这个过程被称为 内容分发 (或 “transclusion” 如果你熟悉 Angular)。Vue.js 实现了一个内容分发 API，使用特殊的 ‘slot’ 元素作为原始内容的插槽。
编译作用域
在深入内容分发 API 之前，我们先明确内容在哪个作用域里编译。假定模板为：
<child-component>
{{ message }}
</child-component>message 应该绑定到父组件的数据，还是绑定到子组件的数据？答案是父组件。组件作用域简单地说是：
父组件模板的内容在父组件作用域内编译；
子组件模板的内容在子组件作用域内编译。
一个常见错误是试图在父组件模板内将一个指令绑定到子组件的属性/方法：
<!-- 无效 -->
<child-component v-show="someChildProperty"></child-component>假定 someChildProperty 是子组件的属性，上例不会如预期那样工作。父组件模板不应该知道子组件的状态。
如果要绑定作用域内的指令到一个组件的根节点，你应当在组件自己的模板上做：
Vue.component('child-component', {
// 有效，因为是在正确的作用域内
template: '<div v-show="someChildProperty">Child</div>',
data: function () {
return {
someChildProperty: true
}
}
})类似地，分发内容是在父作用域内编译。
单个slot
除非子组件模板包含至少一个 ‘slot’ 插口，否则父组件的内容将会被丢弃。当子组件模板只有一个没有属性的 slot 时，父组件整个内容片段将插入到 slot 所在的 DOM 位置，并替换掉 slot 标签本身。
最初在 ‘slot’ 标签中的任何内容都被视为备用内容。备用内容在子组件的作用域内编译，并且只有在宿主元素为空，且没有要插入的内容时才显示备用内容。
示例代码：
<div id="app">
<h1>我是父组件的标题</h1>
<my-component>
<p>初始内容1</p>
<p>初始内容2</p>
</my-component>
</div>
Vue.component('my-component',{
template:`
<div>
<h2>我是子组件的标题</h2>
<slot>
只有在没有要分发的内容是才出现。
</slot>
<div>
`,
})
new Vue({
el:'#app'
})运行结果如下:
