Нова директива v-slot у Vue

Минулого тижня відбувся реліз 2.6.0-beta.3 версії Vue.js. Серед нововведень – фіча, яка спрощує слоти з обмеженою областю видимості.

У статті ознайомимось з директивою v-slot та її скороченням (зазначена у RFC-0001 та RFC-0002).

Щоб дійсно відчути як вона спрощує синтаксис, спочатку розглянемо приклад зі scoped slots. Уявіть, що є компонент List, який визначає відфільтрований список як scope.

У коді це виглядатиме приблизно так:

<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 можна вказати scope цього слота прямо у тегу компонента, уникаючи зайвого шару:

<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 та 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 за замовчуванням – #default.