基本使用

組件通過slot預留位置，使用組件的時候，可以通過傳遞具體的內容去替換slot佔用的地方，這就是插槽。

比如現在定義了一個組件：

<!--
simple-use.vue
-->
<template>
  <div>
    <slot></slot>
  </div>
</template>

組件<slot></slot>佔用的位置具體內容不確定，需要使用的時候傳遞進來，我們就可以這樣使用：

<simple-use>
  <em style='color:red'>傳遞給插槽的內容（可以是文本，標籤或者組件等）</em>
</simple-use>

最終的結果可以理解為：

<template>
  <div>
    <!-- <slot></slot> 這個標記的內容被下面的代替了 -->
    <em style='color:red'>傳遞給插槽的內容（可以是文本，標籤或者組件等）</em>
  </div>
</template>

給插槽一個默認值

有時候，我們可能希望slot有一個自己的默認值，在沒有傳遞數據給組件的時候，使用默認數據。
想實現這樣給功能很簡單，只要在slot直接添加默認值即可，比如：

<!--
default-content.vue
-->
<template>
  <div>
    <slot>
      沒有傳遞數據時候的默認值
    </slot>
  </div>
</template>

使用的時候就可以傳遞或者不傳遞數據：

<default-content></default-content>
<default-content>這是傳遞的數據</default-content>

最終的結果可以理解為：

<template>
  <div>
      沒有傳遞數據時候的默認值
  </div>
</template>

<template>
  <div>
    這是傳遞的數據
  </div>
</template>

我們看見，第一個選擇了默認數據，第二個使用了傳遞進去的數據。

温馨提示：父級模板裏面的所有內容都是在父級作用域中編譯的，子模板裏面的所有內容都是在子作用域中編譯的。

具名插槽

有時候slot可能有多個，為了對應起來，可以給slot起名字，傳遞的時候對應起來：

<!--
name-slot.vue
-->
<template>
  <ul>
    <li>
      <slot name='index1'></slot>
    </li>
    <li>
      <slot name='index2'></slot>
    </li>
    <li>
      <slot></slot>
    </li>
  </ul>
</template>

我們定義了三個slot，其中二個名字分別叫index1和index2，第三個沒有定義名稱，默認名稱是default，因此，我們在使用的時候就需要這樣使用：

<name-slot>
  <template v-slot:index1>
    地方1
  </template>
  <template v-slot:index2>
    地方2
  </template>
  <template v-slot:default>
    默認地方
  </template>
</name-slot>

我們通過v-slot:name的方式把template模板和slot對應了起來，因此運行後的結果就是：

<!--
name-slot.vue
-->
<template>
  <ul>
    <li>
      地方1
    </li>
    <li>
      地方2
    </li>
    <li>
      默認地方
    </li>
  </ul>
</template>

需要注意的是，v-slot只能添加在<template>上（不過"作用域插槽"這種情況除外）。

作用域插槽

有時候我們希望在使用組件的是，讓插槽內容訪問子組件中的數據，可以通過插槽 prop這個特性實現：

<!--
scope-slot.vue
-->
<template>
  <div>
    <slot v-bind:message='message'></slot>
  </div>
</template>
<script>
export default {
  data() {
    return {
      message: "來自子組件中的數據"
    };
  }
};
</script>

使用的時候，我們需要接收一下：

<scope-slot>
  <!-- 這裏的default表示默認的，如果有多個插槽，改為對應的插槽名字 -->
  <template v-slot:default='sub_scope'>
    {{sub_scope.message}}
  </template>
</scope-slot>

最終的結果就是：

<template>
  <div>
    來自子組件中的數據
  </div>
</template>