【譯】Vue 的小奇技（第四篇）：Vue.js 2.6.0 中的新指令 v-slot

• 原文地址：New v-slot directive in Vue.js 2.6.0

• 原文做者：Alex Jover

• 譯者：程序猿何大叔

特別聲明：本文是做者 Alex Jover 發佈在 VueDose 上的一個系列。

版權歸做者全部。

譯者在翻譯前已經和做者溝通獲得了翻譯整個系列的受權。

爲了避免影響你們閱讀，得到受權的記錄會放在本文的最後。

很開心見到你們這麼喜歡 VueDose 的教程，最近我收到了讓我驚訝的關於性能提高的反饋，我很是感激讀者們的支持和讚賞 🤗。

正文

上週 Vue.js 的 2.6.0-beta.3 版本已經發布，其中包含了進一步簡化做用域插槽的新特性。

這篇文章介紹了 vue 的新指令 v-slot 和其簡寫方式，就如在 RFC-0001 和 RFC-0002 中描述的同樣。

爲了可以弄清楚它是怎樣簡化語法的，咱們來一塊兒看看它在當前做用域插槽是怎樣的。想象一下你有一個 List 組件，而且它暴露了一個過濾後的列表數據做爲它的做用域插槽。

你使用該帶有做用域插槽的 List 組件應該以下所示：

<template>
    <List :items="items">
        <template slot-scope="{ filteredItems }">
            <p v-for="item in filteredItems" :key="item">{{ item }}</p>
        </template>
    </List>
</template>
複製代碼

咱們所要講解的主要內容與 List 組件的實現方式並無太大的關係，可是你能夠在這個 Codesandbox 查看示例源碼。

然而，咱們能夠直接在組件標籤上使用新指令 v-slot，避免了額外的嵌套：

<template>
    <List v-slot="{ filteredItems }" :items="items">
        <p v-for="item in filteredItems" :key="item">{{ item }}</p>
    </List>
</template>
複製代碼

記住 v-slot 指令只能用在組件或 template 標籤上，而不能使用在原生 html 標籤上。

這種方式能讓代碼可讀性更高，特別是在你有嵌套的做用域插槽，使得難以定位做用域來源的狀況下。

v-slot 指令也提供了一個綁定 slot 和 scope-slot 指令的方式，可是須要使用一個 : 來分割它們。舉個摘自 vue-promised 的例子：

<template>
  <Promised :promise="usersPromise">
    <p slot="pending">Loading...</p>

    <ul slot-scope="users">
      <li v-for="user in users">{{ user.name }}</li>
    </ul>

    <p slot="rejected" slot-scope="error">Error: {{ error.message }}</p>
  </Promised>
</template>
複製代碼

以上例子可使用 v-slot 指令重寫以下：

<template>
    <Promised :promise="usersPromise">
        <template v-slot:pending>
            <p>Loading...</p>
        </template>

        <template v-slot="users">
            <ul>
                <li v-for="user in users">{{ user.name }}</li>
            </ul>
        </template>

        <template v-slot:rejected="error">
            <p>Error: {{ error.message }}</p>
        </template>
    </Promised>
</template>
複製代碼

最後，v-slot 以符號 # 做爲其指令的簡寫模式，上一個例子能夠被重寫爲：

<template>
    <Promised :promise="usersPromise">
        <template #pending>
            <p>Loading...</p>
        </template>

        <template #default="users">
            <ul>
                <li v-for="user in users">{{ user.name }}</li>
            </ul>
        </template>

        <template #rejected="error">
            <p>Error: {{ error.message }}</p>
        </template>
    </Promised>
</template>
複製代碼

要記住的是，v-slot 指令默認應該簡寫爲 #default。

讀完文章，對於這個新的 slot 語法你感到興奮嗎？

你能夠在線閱讀這篇 原文，裏面有可供複製粘貼的源代碼。若是你喜歡這個系列的話，請分享給你的同事們！

結語

此係列的其餘文章，會同步系列官網的發佈狀況，及時地翻譯發佈到掘金。請持續關注「程序猿何大叔」，相信我會給你們帶來更多優質的內容，不要忘了點贊~

若是想要了解譯者的更多，請查閱以下：

• 我的博客：blog.hadesz.com
• 我的 github 倉庫：github.com/hadeshe93
• 我的微信公衆號：搜索「程序猿何大叔」

請求翻譯受權記錄

---

以爲本文不錯的話，分享一下給小夥伴吧~