Как использовать слоты в Svelte

Svelte предлагает различные способы взаимодействия компонентов друг с другом, включая реквизиты, слоты и т. д. Вам понадобится интегрировать слоты для создания гибких и многократно используемых компонентов в ваших приложениях Svelte.

Понимание слотов в Svelte

Слоты в фреймворк Svelte работать аналогично слоты в Vue. Они предоставляют способ передачи контента от родительского компонента к дочернему. С помощью слотов вы можете определять заполнители в шаблоне компонента, куда можно вставлять контент из родительского компонента.

Этот контент может быть простым текстом, HTML-разметкаили другие компоненты Svelte. Работа со слотами позволяет создавать настраиваемые и динамические компоненты, которые адаптируются к различным вариантам использования.

Создание базового слота

Чтобы создать слот в Svelte, используйте команду слот элемент в шаблоне компонента. слот

Элемент является заполнителем для содержимого, которое вы передаете из родительского компонента. По умолчанию слот будет отображать любой переданный ему контент.

Вот пример того, как создать базовый слот:

<main>
 This is the child component
<slot>slot>
main>

Приведенный выше блок кода представляет дочерний компонент, который использует элемент slot для получения содержимого из родительского компонента.

Чтобы передать содержимое из родительского компонента в дочерний компонент, вы сначала импортируете дочерний компонент в родительский компонент. Затем вместо использования самозакрывающегося тега для визуализации дочернего компонента используйте открывающий и закрывающий тег. Наконец, в тегах компонента напишите содержимое, которое вы хотите передать из родительского компонента в дочерний.

Например:

<script>
 import Component from "./Component.svelte";
script>
<main>
 This is the parent component
<Component>
<span>This is a message from the parent componentspan>
Component>
main>

Помимо передачи содержимого от родительских компонентов к дочерним, вы можете предоставить в слотах резервный контент/контент по умолчанию. Это содержимое будет отображаться в слоте, если родительский компонент не передает никакого контента.

Вот как вы можете передать резервный контент:

<main>
 This is the child component
<slot>Fallback Contentslot>
main>

Этот блок кода предоставляет текст «Резервный контент» в качестве резервного контента для слота, который будет отображаться, если родительский компонент не предоставляет никакого контента.

Передача данных через слот с помощью реквизита слота

Svelte позволяет передавать данные в слоты, используя реквизиты слотов. Вы используете реквизиты slot в ситуациях, когда хотите передать некоторые данные из дочернего компонента в контент, в который вы вставляете слот.

Например:

<script>
 let message = 'Hello Parent Component!'
script>
<main>
 This is the child component
<slotmessage={message}>slot>
main>

Блок кода выше представляет компонент Svelte. В рамках сценарий тег, вы объявляете переменную сообщение и присвойте текст «Hello Parent Component!» к этому. Вы также передаете переменную сообщения в свойство slot. сообщение. Это делает данные сообщения доступными для родительского компонента, когда он вводит контент в этот слот.

<script>
 import Component from "./Component.svelte";
script>
<main>
 This is the parent component
<Componentlet: message>
<div>
 The child component says {message}
div>
Component>
main>

пусть: сообщение синтаксис позволяет родительскому компоненту получить доступ к сообщение slot prop, предоставляемый дочерним компонентом. div теги сообщение переменная – это данные из сообщение слот реквизит.

Обратите внимание, что вы не ограничены одним реквизитом слота, вы можете передать несколько реквизитов слота по мере необходимости:

<script>
 let user = {
 firstName: 'John',
 lastName: 'Doe'
 };
script>
<main>
 This is the child component
<slotfirstName={user.firstName}lastName={user.lastName}>slot>
main>

В родительском компоненте:

<script>
 import Component from "./Component.svelte";
script>
<main>
 This is the parent component
<Componentlet: firstNamelet: lastName>
<div>
 The user's name is {firstName} {lastName}
div>
Component>
main>

Работа с именованными слотами

Вы можете использовать именованные слоты, если хотите передать в компоненты несколько слотов. Именованные слоты упрощают управление различными слотами, поскольку каждому слоту можно присвоить уникальное имя. С помощью именованных слотов вы можете создавать сложные компоненты с различной компоновкой.

Чтобы создать именованный слот, передайте имя опора на слот элемент:

<div>
 This is the child component

<p>Header: <slotname='header'>slot>p>
<p>Footer: <slotname='footer'>slot>p>
div>

В этом примере есть два именованных слота, слот с именем заголовок и слот с названием нижний колонтитул. Используя слот prop, вы можете передавать содержимое в каждый слот из родительского компонента.

Например:

<script>
 import Component from "./Component.svelte";
script>
<main>
 This is the parent component
<Component>
<spanslot="header">This will be passed to the header slotspan>
<spanslot="footer">This will be passed to the footer slotspan>
Component>
main>

Этот код демонстрирует, как вы используете слот prop для передачи контента в именованные слоты. Во-первых охватывать тег, вы передаете слот реквизит со значением заголовок. Это гарантирует, что текст внутри охватывать тег будет отображаться в заголовок слот. Аналогично, текст внутри охватывать тег с слот стоимость реквизита нижний колонтитул будет рендериться в нижний колонтитул слот.

Понимание переадресации слотов

Переадресация слотов — это функция в Svelte, которая позволяет передавать контент из родительского компонента через компонент-оболочку в дочерний компонент. Это может быть очень полезно в тех случаях, когда вы хотите передать контент из несвязанных компонентов.

Вот пример использования переадресации слотов: сначала создайте дочерний компонент:

<main>
 This is the child component
<slotname="message">slot>
main>

Далее вы создаете компонент-оболочку:

<script>
 import Component from "./Component.svelte";
script>
<main>
<Component>
<divslot='message'>
<slotname="wrapperMessage">slot>
div>
Component>
main>

В этом блоке кода вы передаете еще один именованный слот в сообщение слот дочернего компонента.

Затем в родительском компоненте напишите этот код:

<script>
 import Wrapper from "./Wrapper.svelte";
script>
<main>
 This is the parent component
<Wrapper>
<divslot="wrapperMessage">
 This is from the parent component
div>
Wrapper>
main>

В приведенной выше структуре содержимое «Это из родительского компонента» передается через компонент-оболочку непосредственно в дочерний компонент благодаря оберткаСообщение слот внутри компонента-обертки.

Сделайте свою жизнь проще с помощью игровых автоматов Svelte

Слоты — это мощная функция в Svelte, которая позволяет создавать легко настраиваемые и многократно используемые компоненты. Вы узнали, как создавать базовые слоты, именованные слоты, использовать реквизиты слотов и т. д. Понимая различные типы слотов и способы их использования, вы можете создавать динамичные и гибкие пользовательские интерфейсы.