為了讓組件可以組合，需要一種方式來混合父組件的內容與子組件自己的模板。這個過程稱為內容分發，使用特殊的<slot>元素作為原始內容的插槽首先需要明確在哪個作用域編譯父組件模板的內容在父組件作用域編譯；子組件模板在子組件的作用域內編譯官方文檔

單個插槽

當子組件中不包含<slot>插口時，父組件傳入的內容會被丟棄，當子組件的模板只有一個沒有屬性的插槽時 ，父組件傳入的整個內容片段將插入到插槽所在的DOM 位置，並替換點插槽標簽本身
最初在 <slot> 標簽中的任何內容都被視為備用內容。備用內容在子組件的作用域內編譯，並且只有在宿主元素為空，且沒有要插入的內容時才顯示備用內容。

子組件

<div>
  <slot>
    只有在沒有要分發的內容時才會顯示。
  </slot>
</div>

父組件

<div>
    <child>
        <p>這是一些初始內容</p>
        <p>這是更多的初始內容</p>
    </child>
</div>

具名插槽

<slot> 元素可以用一個特殊的特性 name 來進一步配置如何分發內容。多個插槽可以有不同的名字。具名插槽將匹配內容片段中有對應 slot 特性的元素。仍然可以有一個匿名插槽，它是默認插槽，作為找不到匹配的內容片段的備用插槽。如果沒有默認插槽，這些找不到匹配的內容片段將被拋棄。

子組件

<div>
  <h1>我是Home組件</h1>
  <slot name="header">
    <p>這是一個具名插槽</p>
  </slot>
  <main>  
    <slot>這是單個插槽</slot>
  </main>
  <slot name="footer">
    <p>這是另一個具名插槽</p>
  </slot>
</div>

父組件

  <div>
    <home>
 
 
      <p>若不指定slot的name值，則默認為沒有使用過的具名插槽或者匿名插槽，如果子組件中沒有其他具名插槽或者匿名slot，則此處的內容會丟失</p>
        <p slot="footer">這是name屬性為footer的插槽需要顯示的內容</p>
    </home>
  </div>

作用域插槽

作用域插槽可以用作一個能被傳遞數據的可重用模板，來代替已經渲染元素。在子組件中只要將數據傳遞到插槽，就像將prop傳遞給組件一樣,可以實現子組件向父組件之間的傳值:在父級中，具有特殊特性 slot-scope 的 <template> 元素必須存在，表示它是作用域插槽的模板。slot-scope 的值將被用作一個臨時變量名，此變量接收從子組件傳遞過來的 prop 對象：在 2.5.0+，slot-scope 能被用在任意元素或組件中而不再局限於 <template>。

子組件

  <template>  
    <slot msg="hello">這是作用域插槽</slot>
  </template>

父組件

  <div>
    <home>
      <p slot-scope="data">
        <a href="#">{{data.msg}}</a>
      </p>
    </home>
  </div>

作用域插槽也可以是具名，它的典型用法是在列表中的渲染中，允許使用者自定義如何渲染列表的每一項:

父組件

  <div>
    <home>
      <li slot="list" slot-scope="props">{{props.msg}}</li>
    </home>
  </div>

子組件

<template>
<div>
  <ul>  
    <slot name="list" 
    v-for="option in dataList"
    :msg="option">這是具名作用域插槽</slot>
  </ul>
</div>
</template>

插槽分發內容