vue.js的v-solt 插槽（基礎使用、具名插槽、做用域插槽等）

基本使用

組件經過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>