Сокращённый синтаксис для одиночного слота по умолчанию
В случаях, когда только слоту по умолчанию предоставляется содержимое, тег компонента можно использовать в качестве шаблона слота. Это позволяет использовать v-slot
непосредственно на компоненте:
<current-user v-slot:default="slotProps">
{{ slotProps.user.firstName }}
</current-user>
Эту запись можно сократить ещё больше. Предполагается, что неуказанное явно содержимое относится к слоту по умолчанию, так и v-slot
без аргумента означает слот по умолчанию:
<current-user v-slot="slotProps">
{{ slotProps.user.firstName }}
</current-user>
Обратите внимание, что такой сокращённый синтаксис для слота по умолчанию нельзя смешивать с именованными слотами, потому что это приведёт к неоднозначности области видимости:
<!-- НЕПРАВИЛЬНО, будет выкидывать предупреждение -->
<current-user v-slot="slotProps">
{{ slotProps.user.firstName }}
<template v-slot:other="otherSlotProps">
slotProps НЕДОСТУПНЫ здесь
</template>
</current-user>
При наличии нескольких слотов лучше используйте полный синтаксис на основе <template>
для всех слотов:
<current-user>
<template v-slot:default="slotProps">
{{ slotProps.user.firstName }}
</template>
<template v-slot:other="otherSlotProps">
...
</template>
</current-user>
Last updated
Was this helpful?