Сокращённая запись для именованных слотов
Аналогично 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
Was this helpful?