Другие примеры

Входные параметры слотов позволяют превратить их в переиспользуемые шаблоны, которые могут отображать различное содержимое, основываясь на входных параметрах. Это очень полезно при разработке переиспользуемых компонентов, которые инкапсулируют логику данных, позволяя родительскому компоненту настраивать часть своего шаблона.

Например, реализуем компонент <todo-list>, который содержит шаблон и логику фильтрации для списка задач:

<ul>
  <li
    v-for="todo in filteredTodos"
    v-bind:key="todo.id"
  >
    {{ todo.text }}
  </li>
</ul>

Вместо жёсткого кодирования содержимого каждой задачи списка, мы можем позволить родительскому компоненту взять на себя управление отображением с помощью слота, а затем привязать todo в качестве входного параметра слота:

<ul>
  <li
    v-for="todo in filteredTodos"
    v-bind:key="todo.id"
  >
    <!--
    Указываем слот для каждой задачи, передавая
    объект `todo` в качестве входного параметра.
    -->
    <slot name="todo" v-bind:todo="todo">
      <!-- Содержимое по умолчанию -->
      {{ todo.text }}
    </slot>
  </li>
</ul>

Теперь, при использовании <todo-list>, можно опционально переопределить <template> для элементов списка, но сохранив доступ к данным из дочернего компонента:

<todo-list v-bind:todos="todos">
  <template v-slot:todo="{ todo }">
    <span v-if="todo.isComplete">✓</span>
    {{ todo.text }}
  </template>
</todo-list>

Однако, это едва ли вершина айсберга на что способы слоты с ограниченной областью видимости. Несколько реальных примеров использования слотов с ограниченной областью видимости можно посмотреть в библиотеках Vue Virtual Scroller, Vue Promised, и Portal Vue.