關於插槽 slot

本篇（可能此係列會包含不少篇）純屬從Vue官方文檔找來的內容，也可能會根據自身的知識狀況擴展、延伸、概括，進行個性化總結排版，方便本身記錄和查閱。

在Vue2.6.0中具名插槽和做用域插槽引入了新的統一的語法（v-slot指令）。它取代了 slot 和slot-scope兩個特性。

插槽做用域

當父級模板裏的內容編譯時只會在父級做用域裏生效；子模板裏的全部內容都是在子做用域裏編譯。 例子：

# <navigation-link> 組件
<a
  v-bind:href="url"
  class="nav-link"
>
  <slot></slot>
</a>
複製代碼

該插槽跟模板的其它地方同樣能夠訪問相同的實例屬性 (也就是相同的「做用域」)，而不能訪問 的做用域。例如 url 是訪問不到的：

<navigation-link url="/profile">
  Clicking here will send you to: {{ url }}
  <!--
  這裏的 `url` 會是 undefined，由於 "/profile" 是
  _傳遞給_ <navigation-link> 的而不是
  在 <navigation-link> 組件*內部*定義的。
  -->
</navigation-link>
複製代碼

具名插槽

有時咱們須要多個插槽。例如對於一個帶有以下模板的 組件：

<div class="container">
  <header>
    <!-- 咱們但願把頁頭放這裏 -->
  </header>
  <main>
    <!-- 咱們但願把主要內容放這裏 -->
  </main>
  <footer>
    <!-- 咱們但願把頁腳放這裏 -->
  </footer>
</div>
複製代碼

元素有一個特殊的特性：name。這個特性能夠用來定義額外的插槽：

<div class="container">
  <header>
    <slot name="header"></slot>
  </header>
  <main>
    <slot></slot>
  </main>
  <footer>
    <slot name="footer"></slot>
  </footer>
</div>
複製代碼

一個不帶 name 的 出口會帶有隱含的名字「default」。

在向具名插槽提供內容的時候，咱們能夠在一個

<base-layout>
  <template v-slot:header>
    <h1>Here might be a page title</h1>
  </template>

  <p>A paragraph for the main content.</p>
  <p>And another one.</p>

  <template v-slot:footer>
    <p>Here's some contact info</p> </template> </base-layout> 複製代碼

如今

<base-layout>
  <template v-slot:header>
    <h1>Here might be a page title</h1>
  </template>

  <template v-slot:default>
    <p>A paragraph for the main content.</p>
    <p>And another one.</p>
  </template>

  <template v-slot:footer>
    <p>Here's some contact info</p> </template> </base-layout> 複製代碼

任何一種寫法都會渲染出：

<div class="container">
  <header>
    <h1>Here might be a page title</h1>
  </header>
  <main>
    <p>A paragraph for the main content.</p>
    <p>And another one.</p>
  </main>
  <footer>
    <p>Here's some contact info</p> </footer> </div> 複製代碼

注意 v-slot 只能添加在一個

當被提供的內容只有默認插槽時，組件的標籤才能夠被看成插槽的模板來使用。這樣咱們就能夠把 v-slot 直接用在組件上：

<current-user v-slot:default="slotProps">
  {{ slotProps.user.firstName }}
</current-user>
複製代碼

這種寫法還能夠更簡單。就像假定未指明的內容對應默認插槽同樣，不帶參數的 v-slot 被假定對應默認插槽：

<current-user v-slot="slotProps">
  {{ slotProps.user.firstName }}
</current-user>
複製代碼

注意默認插槽的縮寫語法不能和具名插槽混用，由於它會致使做用域不明確：

<!-- 無效，會致使警告 -->
<current-user v-slot="slotProps">
  {{ slotProps.user.firstName }}
  <template v-slot:other="otherSlotProps">
    slotProps is NOT available here
  </template>
</current-user>
複製代碼

只要出現多個插槽，請始終爲全部的插槽使用完整的基於

<current-user>
  <template v-slot:default="slotProps">
    {{ slotProps.user.firstName }}
  </template>

  <template v-slot:other="otherSlotProps">
    ...
  </template>
</current-user>
複製代碼

動態插槽

***動態指令***參數也可使用在 v-slot 上，來定義動態的插槽名：

<base-layout>
  <template v-slot:[dynamicSlotName]>
    ...
  </template>
</base-layout>
複製代碼

具名插槽的縮寫

跟 v-on 和 v-bind 同樣，v-slot 也有縮寫，即把參數以前的全部內容 (v-slot:) 替換爲字符 #。例如 v-slot:header 能夠被重寫爲 #header：

<base-layout>
  <template #header>
    <h1>Here might be a page title</h1>
  </template>

  <p>A paragraph for the main content.</p>
  <p>And another one.</p>

  <template #footer>
    <p>Here's some contact info</p> </template> </base-layout> 複製代碼

然而，和其它指令同樣，該縮寫只在其有參數的時候纔可用。這意味着如下語法是無效的：

<!-- 這樣會觸發一個警告 -->
<current-user #="{ user }">
  {{ user.firstName }}
</current-user>
複製代碼

若是你但願使用縮寫的話，你必須始終以明確插槽名取而代之：

<current-user #default="{ user }">
  {{ user.firstName }}
</current-user>
複製代碼