一、一般定義子組件情況：
<body>
<div id="app">
<child>
<span>123456</span>
</child>
</div>
<script>
new Vue({
el:'#app',
components:{
child:{
template:"<div>我是子組件</div>"
}
}
});
</script>
</body>
瀏覽器打開：<span>123456</span>內容不會顯示，界面只顯示：我是子組件
注：雖然<span>標簽被子組件的child標簽所包含，但由於他不在子組件的template屬性中，因此不屬於子組件
二、單個slot
在template中添加<slot></slot>標簽
<script>
new Vue({
el:'#app',
components:{
child:{
template:"<div><slot></slot>我是子組件</div>"
}
}
});
</script>
瀏覽器打開發現<span>標簽內容顯示出來了，如圖：
將<slot>標簽再換個位置：template:"<div>我是子組件<slot></slot></div>"，如圖：
三、具名slot
<slot> 元素可以用一個特殊的屬性 name 來配置如何分發內容。多個 slot 可以有不同的名字。
使用：（1）父組件要在分發的標簽中添加屬性"slot=name名"
（2）子組件在對應分發位置上的slot標簽添加屬性"name=name名"
代碼如下：
<body>
<div id="app">
<child>
<span slot="one">123456</span>
<span slot="two">abcdef</span>
</child>
</div>
<script>
new Vue({
el:'#app',
components:{
child:{
template:"<div><slot name='two'></slot>我是子組件<slot name='one'></slot></div>"
}
}
});
</script>
</body>
瀏覽器打開，界面如下：
總結：slot分發其實就是父組件需要在子組件內放一些DOM，它就是負責這些DOM是否顯示，在哪個地方顯示的。