Svelte пропонує різноманітні механізми для налагодження взаємодії між компонентами, включаючи передачу пропсів, використання слотів та інші підходи. Зокрема, для створення гнучких та багаторазових компонентів у ваших проєктах на Svelte, вам знадобиться вміння застосовувати слоти.
Основи роботи зі слотами у Svelte
Слоти у фреймворку Svelte мають схожий принцип дії, як і слоти у Vue. Вони забезпечують можливість передачі контенту від батьківського компонента до дочірнього. Завдяки слотам ви можете визначити в шаблоні компонента місця-заповнювачі, куди згодом можна буде вставити контент, що передається з батьківського компонента.
Цим контентом може бути простий текст, HTML-розмітка або інші Svelte-компоненти. Використання слотів відкриває шлях до створення висококастомізованих та динамічних компонентів, здатних адаптуватися до різних потреб.
Створення простого слота
Щоб створити слот у Svelte, використовуйте елемент `slot` у шаблоні компонента. Цей елемент слугує як місце-заповнювач для контенту, який ви передаєте з батьківського компонента. За замовчуванням, слот відображає будь-який переданий йому контент.
Розглянемо приклад створення базового слота:
<main> Це дочірній компонент <slot></slot> </main>
Наведений вище код ілюструє дочірній компонент, який використовує елемент `slot` для отримання контенту від батьківського компонента.
Щоб передати контент з батьківського компонента до дочірнього, спочатку імпортуйте дочірній компонент у батьківський. Потім, замість використання самозакриваючого тегу для відображення дочірнього компонента, застосуйте відкриваючий та закриваючий теги. В межах цих тегів розмістіть контент, який ви хочете передати від батьківського до дочірнього компонента.
Наприклад:
<script> import Component from "./Component.svelte"; </script> <main> Це батьківський компонент <Component> <span>Це повідомлення від батьківського компонента</span> </Component> </main>
Окрім передачі контенту від батьківських до дочірніх компонентів, ви також можете визначити резервний контент або контент за замовчуванням у слотах. Цей контент буде показано, якщо батьківський компонент не передасть жодного контенту.
Ось приклад того, як можна визначити резервний контент:
<main> Це дочірній компонент <slot>Резервний контент</slot> </main>
У цьому прикладі текст “Резервний контент” використовується як запасний варіант для відображення, якщо батьківський компонент не надає жодного контенту.
Передача даних через слоти за допомогою пропсів слотів
Svelte дозволяє передавати дані в слоти за допомогою пропсів слотів. Використовуйте їх, коли вам потрібно передати певні дані від дочірнього компонента до контенту, який ви вставляєте.
Наприклад:
<script>
let message="Привіт, батьківський компонент!"
</script>
<main>
Це дочірній компонент
<slot message={message}></slot>
</main>
У цьому коді, в тезі `script`, оголошується змінна `message` та присвоюється їй значення “Привіт, батьківський компонент!”. Ця змінна потім передається як проп `message` слоту, роблячи дані доступними для батьківського компонента при вставці контенту.
<script>
import Component from "./Component.svelte";
</script>
<main>
Це батьківський компонент
<Component let:message>
<div>
Дочірній компонент каже: {message}
</div>
</Component>
</main>
Синтаксис `let:message` дозволяє батьківському компоненту отримати доступ до пропса `message`, переданого з дочірнього компонента. Змінна `message` у тезі `div` представляє собою дані, які передаються з пропса слота.
Зауважте, що ви не обмежені одним пропсом, за потреби ви можете передавати декілька:
<script>
let user = {
firstName: 'Іван',
lastName: 'Петренко'
};
</script>
<main>
Це дочірній компонент
<slot firstName={user.firstName} lastName={user.lastName}></slot>
</main>
У батьківському компоненті:
<script>
import Component from "./Component.svelte";
</script>
<main>
Це батьківський компонент
<Component let:firstName let:lastName>
<div>
Ім'я користувача: {firstName} {lastName}
</div>
</Component>
</main>
Практика з іменованими слотами
Використовуйте іменовані слоти, якщо потрібно передати кілька слотів у компонентах. Вони полегшують керування різними слотами, оскільки кожному можна надати унікальне ім’я. Завдяки іменованим слотам, ви можете створювати складні компоненти з різними макетами.
Для створення іменованого слота, передайте властивість `name` до елементу `slot`:
<div> Це дочірній компонент <p>Заголовок: <slot name="header"></slot></p> <p>Підвал: <slot name="footer"></slot></p> </div>
В цьому прикладі є два іменовані слоти: `header` (заголовок) та `footer` (підвал). Використовуючи властивість `slot`, можна передавати контент до кожного з них з батьківського компонента.
Наприклад:
<script> import Component from "./Component.svelte"; </script> <main> Це батьківський компонент <Component> <span slot="header">Це буде передано до слота заголовка</span> <span slot="footer">Це буде передано до слота підвалу</span> </Component> </main>
Цей код показує, як використовувати властивість `slot` для передачі контенту до іменованих слотів. У першому тегу `span`, передається властивість `slot` зі значенням “header”. Це гарантує, що текст всередині цього `span` буде відображено у слоті з іменем `header`. Аналогічно, текст у тезі `span` з атрибутом `slot` зі значенням “footer” буде відображено у слоті з назвою “footer”.
Особливості переадресації слотів
Переадресація слотів – це функція Svelte, яка дозволяє передавати контент від батьківського компонента через проміжний компонент-обгортку до дочірнього. Це може бути дуже корисно, коли потрібно передати контент з непов’язаних компонентів.
Розглянемо приклад використання переадресації слотів. Спочатку створимо дочірній компонент:
<main> Це дочірній компонент <slot name="message"></slot> </main>
Далі, створимо компонент-обгортку:
<script>
import Component from "./Component.svelte";
</script>
<main>
<Component>
<div slot="message">
<slot name="wrapperMessage"></slot>
</div>
</Component>
</main>
У цьому блоці коду, інший іменований слот передається в слот `message` дочірнього компонента.
Тепер, у батьківському компоненті, напишіть такий код:
<script> import Wrapper from "./Wrapper.svelte"; </script> <main> Це батьківський компонент <Wrapper> <div slot="wrapperMessage"> Це повідомлення з батьківського компонента </div> </Wrapper> </main>
У наведеній структурі, контент “Це повідомлення з батьківського компонента” передається через компонент-обгортку безпосередньо в дочірній компонент завдяки слоту `wrapperMessage` у компоненті-обгортці.
Спростіть роботу зі слотами у Svelte
Слоти – це потужна функція Svelte, яка дозволяє створювати компоненти, які можна легко використовувати повторно. Ви вже навчилися створювати основні та іменовані слоти, використовувати пропси слотів та інші можливості. Розуміючи різні типи слотів і способи їх застосування, ви зможете створювати динамічні та гнучкі користувацькі інтерфейси.