v-slot

v-slot

Сокращение: #

Принимает: JavaScript выражение, допустимое в позиции аргумента (можно использовать деструктуризацию в поддерживаемых окружениях). Опционально — требуется только в случае, когда используются входные параметры у слота.

Параметр: имя слота (опционально, по умолчанию default)

Ограничение:

• <template>

• компоненты (для одиночного слота по умолчанию с входными параметрами)

Использование:

Указывает именованные слоты или слоты с входными параметрами.

Пример:

<!-- Именованные слоты -->
<base-layout>
  <template v-slot:header>
    Содержимое заголовка
  </template>

  Содержимое слота по умолчанию

  <template v-slot:footer>
    Содержимое подвала
  </template>
</base-layout>

<!-- Именованный слот с входными параметрами -->
<infinite-scroll>
  <template v-slot:item="slotProps">
    <div class="item">
      {{ slotProps.item.text }}
    </div>
  </template>
</infinite-scroll>

<!-- Слот по умолчанию с входными параметрами, с использованием деструктурирования -->
<mouse-position v-slot="{ x, y }">
  Позиция курсора: {{ x }}, {{ y }}
</mouse-position>