vue官方文件中關於slot插槽的說明很簡短，語言又寫的很凝練,這就有可能造成初次接觸插槽的開發者容易產生“算了吧，回頭再學，反正已經可以寫基礎元件了”的想法，於是就關閉了vue的說明文件。

一、slot的作用

Q: 假如父元件需要在子元件內放一些DOM元素，那麼這些DOM是顯示呢還是不顯示呢？

預設情況下是不會顯示的，如下圖所示，頁面並沒有顯示父元件增加的<span>我是魔鬼</span>  元素內容。那麼我執意要加DOM元素到子元件上該怎麼實現呢？這就用到了slot插槽，使用slot這個標籤可以將父元件放在子元件的內容，放到它想顯示的地方

<div id="app">  
  <children>  
    <span>我是魔鬼</span>  
    <!--上面這行不會顯示-->  
  </children>  
</div>  
<script>  
  var vm = new Vue({  
      el: '#app',  
      components: {  
         children: {   
         template: "<h1>我是子元件</h1>"  
       }  
     }  
  });  
</script>  
 

二、簡單理解slot

通俗易懂的講，slot具有“佔坑”的作用，在子元件佔好了位置，那父元件使用該子元件標籤時，新新增的DOM元素就會自動填到這個坑裡面

三、單個slot    

我們將上面的程式碼改一改 , 給child元件新增slot插槽，那麼父元件的新增的DOM元素就填充到這個slot插槽裡面了

注意：如果有多個DOM元素，會一起插入到<slot></slot>這個標籤內

<div id="app">  
  <children>  
    <span>我是魔鬼</span>  
    <!--上面這行會顯示在 “我是子元件” 資料後面-->  
  </children>  
</div>  
<script>  
  var vm = new Vue({  
      el: '#app',  
      components: {  
         children: {   
         template: "<h1>我是子元件</h1><slot></slot>"  
       }  
     }  
  });  
</script>  
 

四、具名插槽

現在我們需要將父元件新增的HTML標籤放在子元件裡的不同位置。具名插槽實現：先在子元件對應分發slot標籤裡，新增name=”name名” 屬性，其次父元件在要分發的標籤裡新增 slot=”name名” 屬性，然後就會將對應的標籤放在對應的位置了。

簡單理解就是：給子元件佔的每一個坑取名，將父元件新增的HTML元素新增到指定名字的坑，就實現了分發內容在不同位置顯示

【Child元件模板】

<template>
  <div>
    <slot name="header"></slot>
    <h1>我是子元件</h1>
    <slot name="footer"></slot>
  </div>
</template>

【父元件引用Child元件】

<Child>
  <span slot="header">我是header</span>
  <span slot="footer">我是footer</span>
</Child>

五、編輯作用域

父元件模板的內容在父元件作用域內編譯；子元件模板的內容在子元件作用域內編譯

【Child元件模板】

<template>
  <div>
    <slot name="header"></slot>
    <h1>{{msg}}</h1>
    <slot></slot>
    <slot name="footer"></slot>
  </div>
</template>
<script>
export default {
  data() {
    return {
      msg: '我是子元件裡面的內容'
    }
  }
}
</script>

【父元件引用Child元件】

<template>
  <Child>
    <span slot="header">我是header</span>
    <h1>{{msg}}</h1>
    <span slot="footer">我是footer</span>
  </Child>
</template>
<script>
export default {
  data() {
    return {
      msg: '我是父元件的內容'
    }
  }
}
</script>

六、解構slot-scope

在子元件中插槽中通過：data綁定了資料，父元件可以通過slot-scope="name"來取得子元件作用域插槽：data繫結的資料，name的名稱可以隨便取，用來定義物件來代替取到的data資料。

【Child元件模板】

<template>
  <div>
    <slot :data="data"></slot>
  </div>
</template>
<script>
export default {
  data() {
    return {
      data: ['Neinei','Laoba','Demi','Feiyan']
    }
  }
}
</script>

【父元件引用Child元件】

  <template>
    <!-- 迴圈資料列表 -->
    <Child>
      <div slot-scope="msg">
        <span v-for="item in msg.data">{{item}} </span>
      </div>
    </Child>

    <!-- 直接顯示資料 -->
    <Child>
      <div slot-scope="msg">
        <span>{{msg.data}} </span>
      </div>
    </Child>

    <!-- 不使用其提供的資料, 作用域插槽退變成匿名插槽 -->
    <Child>
      <div>我是插槽</div>
    </Child>
  </template>