Vue.js 你需要知道的 v-slot （譯）

原文鏈接：https://juejin.im/post/5c64e11151882562e4726d98

面試官：談談 v-slot 的作用？

自己先想一分鐘。

 

 

 

這篇文章假設你對組件的基礎知識有定義的瞭解，如果你對此還不熟悉，請先閱讀。

從 [email protected] 開始，Vue 爲具名和範圍插槽引入了一個全新的語法，即我們今天要講的主角：v-slot 指令。目的就是想統一 slot 和 scope-slot 語法，使代碼更加規範和清晰。既然有新的語法上位，很明顯，slot 和 scope-slot 也將會在 [email protected] 中徹底的跟我們說拜拜了。而從 [email protected] 開始，官方推薦我們使用 v-slot 來替代後兩者。

我們來一點一點說起吧。文筆有限，不對之處請留言斧正！

具名插槽

在 2.6.0+ 中已棄用

先前，我們使用具名插槽來自定義模板內容，例如，一個假設的 <base-layout> 組件的模板如下：

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

在向具名插槽提供內容的時候，我們可以在一個父組件的 <template> 元素上使用 slot 特性：

<base-layout>
  <template 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 slot="footer">
    <p>Here's some contact info</p>
  </template>
</base-layout>
複製代碼

或者直接用在一個普通的元素上：

<base-layout>
  <h1 slot="header">Here might be a page title</h1>

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

  <p slot="footer">Here's some contact info</p>
</base-layout>
複製代碼

上述兩個示例渲染出來的 HTML 都將會是：

<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 指令改寫上面的栗子：

<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>
複製代碼

就是這麼簡單，插槽的名字現在通過 v-slot:slotName 這種形式來使用。

Tips: 沒有名字的 <slot> 隱含有一個 "default" 名稱

例如，上面的默認插槽，如果你想顯示調用的話，可以這樣：

<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 只能添加到 <template> 或自定義組件上，這點與棄用的 slot 屬性不同

作用域插槽

在 2.6.0+ 中已棄用

有時候，我們想在父組件中訪問子組件內部的一些可用數據。例如，假設有一個下面模板的 <current-user> 組件：

<span>
  <slot>{{ user.lastName }}</slot>
</span>
複製代碼

我們可能想用用戶的名字來替換掉插槽裏面的姓，於是我們這樣寫：

<current-user>
  {{ user.firstName }}
</current-user>
複製代碼

很不幸，上面這段代碼不能如你預期那樣工作，因爲當前代碼的作用域環境是在父組件中，所以它訪問不了 <current-user> 內部的數據。

爲了解決這個， 我們可以在 <current-user> 內部的 <slot> 元素上動態綁定一個 user 對象屬性：

<span>
  <!-- 完整 v-bind:user 下面是簡寫形式 -->
  <slot :user="user">
    {{ user.lastName }}
  </slot>
</span>
複製代碼

綁定到 <slot> 元素上的屬性我們稱之爲 slot props。現在，在父作用域中，我們可以通過 slot-scope 來訪問 user 數據了：

<current-user>
  <template slot-scope="slotProp">
    {{ slotProp.user.firstName }}
  </template>
</current-user>
複製代碼

同樣的，我們使用 v-slot 重構上面的代碼：

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

或者直接作用在 <current-user> 上的寫法：

<!-- 省略默認插槽名字 -->
<current-user v-slot="slotProp">
  {{ slotProp.user.firstName }}
</current-user>

<!-- 顯示調用默認插槽名字 -->
<current-user v-slot:default="slotProp">
  {{ slotProp.user.firstName }}
</current-user>
複製代碼

在這個栗子中，我們選擇 slotProp 作爲我們的 slot props 名字，但你可以使用你喜歡的任何名字。

單個默認插槽的縮寫形式

在上述情況下，當且僅當提供了默認插槽內容時，我們可以使用 v-slot 直接作用在組件上：

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

我們可以簡化上面的的默認插槽寫法：

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

請注意了，默認插槽的縮寫語法不能與具名插槽混用：

<!-- 控制檯將報警告：-->
<!-- To avoid scope ambiguity, the default slot should also use <template> syntax when there are other named slots. -->
<!-- 意思就是說，爲了避免作用域模糊 -->
<!-- 當有其他具名插槽時，默認插槽也應當使用 '<template>' 模板語法 -->
<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="slotProps">
    {{ slotProps.user.firstName }}
  </template>-->
  <template v-slot:default="slotProps">
    {{ slotProps.user.firstName }}
  </template>

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

插槽內容的解構賦值

在 Vue 代碼內部，我們傳遞的 slotProps 其實就是函數的一個單一參數：

function (slotProps) {
  // ... slot content ...
}
複製代碼

這也就意味着 v-slot 的值只要滿足函數參數定義的 JavaScript 表達式的都可以接受。因此，在支持的環境（單文件或現代瀏覽器）中，你還可以使用 ES2015 解構語法來提取特定的插值內容，例如：

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

代碼看起來更簡潔對吧。我們還可以重命名解構變量：

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

這給了我們很多自由操作的空間，你甚至可以自定義回退內容，以便在未定義插值情況下使用：

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

動態插槽名稱

2.6.0+ 新增

動態指令參數 也適用於 v-slot ，允許我們定義動態插槽名稱：

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

命名插槽簡寫

2.6.0+ 新增

與 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>
複製代碼

參考

• v-slot設計細節看這裏
• Vue中文文檔更新的慢，英文文檔看這裏

結尾！

囉嗦了這麼多，希望看到的同學或多或少有點收穫吧。不對的地方還請留言指正，不勝感激。俗話說，三人行則必有我師！ 希望更多熱衷於 Vue 的小夥伴能聚在一起交流技術！下面是我維護的一個Q羣，歡迎掃碼進羣哦，讓我們一起交流學習吧。也可以加我個人微信：G911214255 ，備註 掘金 即可。