自己這段時間在自學vue.js，發現關於插槽這方面，官方文檔中，沒有詳細的講解使用方法與示例，我自己試著來總結了一下。然後根據官方文檔寫了幾個使用插槽的例子。每個例子都要引入vue.js。示例中上面為HTML代碼，下面為JavaScript代碼。

　　最初在 <slot> 標簽中的任何內容都被視為備用內容。備用內容在子組件的作用域內編譯，並且只有在宿主元素為空，且沒有要插入的內容時才顯示備用內容。

一、單個插槽：

1 <div id="exp1">
2     <my-com></my-com>
3 </div>

 1 <script type="text/javascript">
 2
 
     //單個插槽
 3     //子組件，備用內容在子組件的作用域內編譯，並且只有在宿主元素為空時，且沒有要插入的內容時才顯示備用內容
 4     Vue.component(‘child-com‘,{
 5         template:‘<div><h2>我是子組件的標題</h2>‘ +
 6         ‘<slot>只有在沒有要分發的內容時才會顯示</slot>‘ +
 7         ‘</div>‘
 8     });
 9     //父組件
10     Vue.component(‘my-com‘,{
 
11         template:‘<div><h1>我是父組件的標題</h1>‘ +
12         ‘<child-com>‘ +
13         ‘<p>這是一些初始內容</p>‘ +
14         ‘<p>這是另外一些初始內容</p>‘ +
15         ‘</child-com>‘ +
16         ‘</div>‘
17     });
18     var exp1 = new Vue({
19         el:‘#exp1‘
20
 
     })
21 </script>

二、具名插槽：

<div id="exp1">
    <parent-com></parent-com>
</div>

 1 <script type="text/javascript">
 2     //子組件
 3     Vue.component(‘app-layout‘,{
 4         template:‘‘ +
 5         ‘<div class="container">‘ +
 6         ‘   <header>‘ +
 7         ‘       <slot name="header"></slot>‘ +
 8         ‘   </header>‘ +
 9         ‘   <main>‘ +
10         ‘       <slot></slot>‘ +
11         ‘   </main>‘ +
12         ‘   <footer>‘ +
13         ‘       <slot name="footer"></slot>‘ +
14         ‘   </footer>‘ +
15         ‘</div>‘
16     });
17     //父組件
18     Vue.component(‘parent-com‘,{
19         template:‘‘ +
20         ‘<app-layout>‘ +
21         ‘   <h1 slot="header">這是一個頁面的標題</h1>‘ +
22         ‘   <p>主要內容的一個段落</p>‘ +
23         ‘   <p>主要內容的另外一個段落</p>‘ +
24         ‘   <p slot="footer">這是一些頁腳信息</p>‘ +
25         ‘</app-layout>‘
26     });
27     var exp1 = new Vue({
28         el:‘#exp1‘
29     })
30 </script>

三、作用域插槽：

<div id="exp1">
    <parent-com></parent-com>
</div>

 1 <script type="text/javascript">
 2     //子組件
 3     //代表性的列表組件模塊
 4     Vue.component(‘child-com‘,{
 5         template:‘‘ +
 6         ‘<ul>‘ +
 7         ‘   <slot name="child-ul" v-for="item in animal" v-bind:text="item.name"></slot>‘ +
 8         ‘</ul>‘,
 9         data:function(){
10             return {
11                 animal:[
12                     {name:‘大象‘},
13                     {name:‘小狗‘},
14                     {name:‘小貓‘},
15                     {name:‘老虎‘}
16                 ]
17             }
18         }
19     });
20     //父組件
21     // 在父組件的模板裏，使用一個Vue自帶的特殊組件<template> ，
22     // 並在該組件上使用scope屬性，值是一個臨時的變量，存著的是由子組件傳過來的
23     // prop對象，在下面的例子中我把他命名為props。
24     //  獲得由子傳過來的prop對象。這時候，父組件就可以訪問子組件在自定義屬性上暴露的數據了。
25     Vue.component(‘parent-com‘,{
26         template:‘‘ +
27         ‘<div class="container">‘ +
28         ‘<p>動物列表</p>‘ +
29         ‘<child-com>‘ +
30         ‘   <template scope="props" slot="child-ul">‘ +
31         ‘       <li class="child-ul">{{ props.text }}</li>‘ +
32         ‘   </template>‘ +
33         ‘</child-com>‘ +
34         ‘</div>‘
35     });
36     //這個<div class="container"></div>是必須的，不然會發生編譯錯誤
37     var exp1 = new Vue({
38         el:‘#exp1‘
39     })
40 </script>

這是我在學習官方文檔，然後在網絡上查找信息後，做的一些總結，歡迎指正。

vue.js-使用插槽分發內容的三個示例