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>
Last updated
Was this helpful?