Сокращённая запись для именованных слотов

Аналогично v-on и v-bind, у v-slot есть собственное сокращение, заменяющее всё перед аргументом (v-slot:) специальным символом #. Например, v-slot:header можно записать как #header:

<base-layout>
  <template #header>
    <h1>Здесь мог быть заголовок страницы</h1>
  </template>

  <p>Параграф для основного контента.</p>
  <p>И ещё один.</p>

  <template #footer>
    <p>Некая контактная информация</p>
  </template>
</base-layout>

Однако, как и в случае с другими директивами, сокращение доступно только при наличии аргумента. Это означает, что следующий синтаксис недопустим:

<!-- Это выкинет предупреждение -->
<current-user #="{ user }">
  {{ user.firstName }}
</current-user>

Необходимо всегда указывать имя слота, если хотите использовать сокращение:

<current-user #default="{ user }">
  {{ user.firstName }}
</current-user>

Last updated