翻譯：Vue.js 2.6.0 中的新指令v-slot

前言

爲了提升英文水平，嘗試着翻譯一些英文技術文章，首先就從這個Vue的小技巧文章開始，目前英文版一共22篇。計劃用時2~3個月翻譯完成。

目前進度[5/22]

原文連接

New v-slot directive in Vue.js 2.6.0

譯文

我很高興看到人們喜歡VueDose!我收到了關於前面發佈的性能文章的驚人反饋！很是感謝你的支持和讚美！

上週發佈了Vue.js的版本2.6.0-beta.3，啓用新的功能可以進一步簡化做用域插槽。

它引入了新的v-slot指令及其簡寫，如RFC-0001和RFC-0002中所述。

爲了理解它是如何簡化語法的，讓咱們看一下目前做用域插槽的使用。假如你有一個列表組件，打算把篩選後的數據暴露給scope。

你使用做用域插槽處理數據的方式像是：

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

這裏沒有列表組件相關的實現，可是你能夠在this Codesandbox 中查看這個例子。

使用v-slot，你能夠直接把做用域插槽直接寫在組件上，從而避免了額外的dom：

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

記住，v-slot只能在組件和模板上使用，不能在純html標籤上使用。

這樣寫使得代碼具備更多的可讀性，特別是當你嵌套使用做用域插槽時，你會很難弄解釋做用域插槽的數據來源。

v-slot指令還引入了一種組合slot和scoped slots指令的方法，可是要加上冒號：。

例如，這個例子來自於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的簡寫是#。

你對這個新的slot的語法感到興奮嗎？

你能夠在線閱讀文章tip online（能夠 複製/粘貼 代碼），可是請你記住，若是你喜歡，要和全部同事分享VueDose。

下週見。

個人理解

當你寫組件的時候，可使用v-slot代替slot 和 slot-scope，可以簡化代碼和代碼的複雜度，可以更加清晰明白的追蹤數據。

vue-promisedgithub開源項目，主要的做用是，在你加載數據的時候，在加載的過程當中顯示loding，加載完顯示結果，若是有錯誤顯示錯誤。

結尾

水平有限，不免有錯漏之處，望各位大大輕噴的同時可以指出，跪謝！

其它翻譯

一、翻譯：提升vue.js中大型數據的性能
二、翻譯：測量vue應用運行時的性能！
三、翻譯：使用PurgeCSS刪除未使用的CSS
四、翻譯：Vue.js 2.6.0 中的新指令v-slot
五、翻譯：使用v-bind和v-on的自適應組件