Именованные слоты полезны при создании компонента, которому требуется несколько слотов.
Например, предположим, что мы хотим создать компонент Article.vue, нам могут потребоваться отдельные слоты для заголовка, области основного содержимого и комментариев.
Имея три разные области, нам нужен способ различать их, иначе, когда мы попытаемся внедрить контент из нашего родительского компонента, наше приложение Vue не будет знать, на какой слот мы пытаемся нацелиться.
Именно здесь именованные слоты становятся очень полезными.
Как использовать именованные слоты
Чтобы использовать именованные слоты во Vue, нужно выполнить два шага:
- Именование наших слотов из нашего дочернего компонента с помощью атрибута
name - Предоставление содержимого в эти именованные слоты из нашего родительского компонента с помощью директивы
v-slot
По умолчанию, когда мы не указываем нашему слоту явный атрибут имени, как в приведенных выше примерах, он имеет имя default.
Чтобы дать нашему слоту имя, <slot> элементы имеют специальный атрибут name, который позволяет нам различать несколько слотов.
В нашем Article.vue примере мы можем назвать наши три слота следующим образом.
<template>
<div>
<slot name="title"> Fallback Title </slot>
<slot name="content"> Fallback Content </slot>
<slot name="comments"> Fallback Comments </slot>
</div>
</template>Затем в нашем родительском компоненте мы можем указать, в какой слот мы хотим внедрить контент, используя директиву v-slot в элементе <template>.
Итак, где бы мы ни объявляли наш компонент с именованными слотами Vue, мы можем создать три <template> элемента, по одному для каждого из наших слотов.
<template>
<div>
<child-component>
<template> Our Title </template>
<template> Our Content </template>
<template> Our Comments </template>
</child-component>
</div>
</template>Если мы сохраним и посмотрим на это, вы увидите, что там мы по-прежнему наш запасной контент
И это потому, что наши шаблоны в настоящее время не нацелены ни на один из наших фактически определенных слотов!
Чтобы исправить это, с помощью директивы v-slot мы передадим имя каждого слота таким образом, чтобы оно точно соответствовало тому, что мы объявили в нашем дочернем компоненте.
<template>
<div>
<child-component>
<template v-slot:title> Our Title </template>
<template v-slot:content> Our Content </template>
<template v-slot:comments> Our Comments </template>
</child-component>
</div>
</template>Теперь мы действительно увидим, как наш контент вставляется в каждый из слотов.
И, честно говоря, все! Я знаю, что использовать именованные слоты в вашем коде действительно так просто.
В чем смысл использования именованных слотов Vue?
Итак, как мы уже говорили, именованные слоты могут помочь вам использовать несколько слотов. Но почему это даже полезно для нас, разработчиков Vue?
Проще говоря, это позволяет нам лучше организовать наш код для разработки, а также позволяет нам писать более масштабируемый код.
Выделяя отдельные разделы целыми их собственными слотами, мы можем легко увидеть, где каждая часть нашего окончательного приложения добавляется в DOM.
Лично я считаю, что самое главное - это то, что он позволяет нам использовать слоты поверх кода, что значительно упрощает стилизацию. В нашем примере у нашего Article.vue дочернего компонента было только три слота, но в реальном приложении слоты выглядели бы примерно так, чтобы наш компонент мог добавлять стили CSS в каждый раздел.
<template>
<div>
<div class="title">
<h1>
<slot name="title"> Fallback Title </slot>
</h1>
</div>
<div class="content">
<p>
<slot name="content"> Fallback Content </slot>
</p>
</div>
<div class="comments">
<slot name="comments"> Fallback Comments </slot>
</div>
</div>
</template>В этом примере гораздо легче понять, зачем нам нужно несколько слотов. Поскольку наш внедренный контент отделен друг от друга разными элементами <div>, <p> и DOM. Невозможно передать всю эту информацию в одном слоте.
Вот пример того, как наши окончательные компоненты могут выглядеть в браузере.
Если мы проверим нашу DOM, мы увидим, что шаблон, использующий v-slot, правильно вставляет контент в нужные места.
Все это означает, что если мы хотим использовать слоты в этом компоненте, нам понадобится больше одного.
Вывод
Хорошо, это все, что нужно для этого краткого руководства по именованным слотам Vue. Это мощный метод, к которому нужно привыкнуть, и он позволит вам создавать более надежные, но очень настраиваемые компоненты.
Я надеюсь, что эта статья помогла вам получить общее представление о том, как работают именованные слоты Vue. Если у вас есть какие-либо вопросы, оставьте их в ответах ниже!
