关键词：slot
说明
为了让组件可以组合，我们需要一种方式来混合父组件的内容与子组件自己的模板。这个过程被称为 **内容分发 **Vue.js 实现了一个内容分发 API ，参照了当前 Web 组件规范草案，使用特殊的 <slot> 元素作为原始内容的插槽。
数据
var vm = new Vue({
el:"#box",
data:{
a:'秋风吹渭水',
b:'落叶满长安',
han:['思君令人老','岁月忽已晚','弃捐勿复道','努力加餐饭']
},
components:{
"m-poem":{
template:"#poem"
}
}
})
模板
<template id="poem">
<div>
<h1>汉乐府</h1>
<slot>无名氏</slot>
<slot name="ul-slot">待添加...</slot>
<slot name="ol-slot">古诗十九首</slot>
<slot></slot>
</div>
</template>
视图
<div id="box">
<m-poem>
<p>{{b}}</p>
<ol slot="ol-slot">
<li v-for="item in han" v-text="item"></li >
</ol>
<p>{{a}}</p>
</m-poem>
<m-poem>
</m-poem>
</div>
slot插槽可不可以插入组件呢，我试了一下，也是可以的
<template id="title">
<div>
<h1>风景</h1>
<p>洛阳城里花如雪</p>
<p>洛阳花开动京城</p>
</div>
</template>
<script>
Vue.component('m-title', {
template:'#title'
});
<div id="box">
<m-poem>
<m-title></m-title>
</m-poem>
</div>
