Svelte пропонує різні способи взаємодії компонентів один з одним, зокрема пропи, слоти тощо. Вам потрібно буде інтегрувати слоти, щоб створювати гнучкі та багаторазово використовувані компоненти у ваших програмах Svelte.
Розуміння слотів у Svelte
Слоти у фреймворку Svelte працюють подібно до слотів у Vue. Вони забезпечують спосіб передачі вмісту від батьківського до дочірнього компонента. За допомогою слотів ви можете визначити заповнювачі в шаблоні компонента, куди можна вставити вміст із батьківського компонента.
Цей вміст може бути простим текстом, розміткою HTML або іншими компонентами Svelte. Робота зі слотами дає змогу створювати високонастроювані та динамічні компоненти, які адаптуються до різних випадків використання.
Створення базового слота
Щоб створити слот у Svelte, використовуйте елемент slot у шаблоні компонента. Елемент слота є заповнювачем для вмісту, який ви передасте від батьківського компонента. За замовчуванням слот відтворює будь-який переданий йому вміст.
Ось приклад того, як створити базовий слот:
<main>
This is the child component
<slot></slot>
</main>
Наведений вище блок коду представляє дочірній компонент, який використовує елемент слота для отримання вмісту від батьківського компонента.
Щоб передати вміст від батьківського компонента до дочірнього компонента, ви спочатку імпортуєте дочірній компонент у батьківський компонент. Тоді замість використання самозакриваючого тегу для відтворення дочірнього компонента використовуйте відкриваючий і закриваючий теги. Нарешті, у тегах компонента напишіть вміст, який потрібно передати від батьківського до дочірнього компонента.
Наприклад:
<script>
import Component from "./Component.svelte";
</script><main>
This is the parent component
<Component>
<span>This is a message from the parent component</span>
</Component>
</main>
На додаток до передачі вмісту від батьківських дочірніх компонентів, ви можете надати запасний вміст/вміст за замовчуванням у слотах. Цей вміст відображатиме слот, якщо батьківський компонент не передає жодного вмісту.
Ось як можна передати запасний вміст:
<main>
This is the child component
<slot>Fallback Content</slot>
</main>
Цей блок коду надає текст «Резервний вміст» як резервний вміст для слота для відображення, якщо батьківський компонент не надає жодного вмісту.
Передача даних через слот із атрибутами слоту
Svelte дозволяє передавати дані в слоти за допомогою реквізитів слотів. Ви використовуєте атрибути слотів у ситуаціях, коли потрібно передати деякі дані від дочірнього компонента до вмісту, який ви розміщуєте.
Наприклад:
<script>
let message="Hello Parent Component!"
</script><main>
This is the child component
<slot message={message}></slot>
</main>
Блок коду вище представляє компонент Svelte. У тезі сценарію ви оголошуєте повідомлення змінної та призначаєте текст «Hello Parent Component!» до нього. Ви також передаєте змінну повідомлення до повідомлення реквізиту слота. Це робить дані повідомлення доступними для батьківського компонента, коли він вставляє вміст у цей слот.
<script>
import Component from "./Component.svelte";
</script><main>
This is the parent component
<Component let:message>
<div>
The child component says {message}
</div>
</Component>
</main>
Синтаксис let:message дозволяє батьківському компоненту отримати доступ до реквізиту слота повідомлення, який надає дочірній компонент. Змінна повідомлення тегу div — це дані з властивості слота повідомлення.
Зауважте, що ви не обмежені одним прописом слота, ви можете передати кілька прописів слота за потреби:
<script>
let user = {
firstName: 'John',
lastName: 'Doe'
};
</script><main>
This is the child component
<slot firstName={user.firstName} lastName={user.lastName}></slot>
</main>
У батьківському компоненті:
<script>
import Component from "./Component.svelte";
</script><main>
This is the parent component
<Component let:firstName let:lastName>
<div>
The user's name is {firstName} {lastName}
</div>
</Component>
</main>
Робота з іменованими слотами
Ви можете використовувати іменовані слоти, якщо хочете передати кілька слотів у своїх компонентах. Іменовані слоти полегшують керування різними слотами, оскільки ви можете дати кожному слоту унікальну назву. За допомогою іменованих слотів ви можете створювати складні компоненти з різними макетами.
Щоб створити іменований слот, передайте властивість імені в елемент slot:
<div>
This is the child component
<p>Header: <slot name="header"></slot></p>
<p>Footer: <slot name="footer"></slot></p>
</div>
У цьому прикладі є два іменовані слоти, слот під назвою заголовок і слот під назвою нижній колонтитул. Використовуючи властивість слота, ви можете передавати вміст до кожного слота з батьківського компонента.
Наприклад:
<script>
import Component from "./Component.svelte";
</script><main>
This is the parent component
<Component>
<span slot="header">This will be passed to the header slot</span>
<span slot="footer">This will be passed to the footer slot</span>
</Component>
</main>
Цей код демонструє, як ви використовуєте властивість слота для передачі вмісту в іменовані слоти. У першому тегу span ви передаєте властивість слота із заголовком значення. Це гарантує, що текст у тегу span буде відображатися в слоті заголовка. Подібним чином текст у тегу span із нижнім колонтитулом значення атрибута слота буде відображено в слоті нижнього колонтитула.
Розуміння переадресації слотів
Перенаправлення слотів — це функція в Svelte, яка дозволяє передавати вміст із батьківського компонента через компонент-оболонку в дочірній компонент. Це може бути дуже корисним у випадках, коли ви хочете передати вміст із непов’язаних компонентів.
Ось приклад того, як використовувати перенаправлення слотів, спочатку створіть дочірній компонент:
<main>
This is the child component
<slot name="message"></slot>
</main>
Далі ви створюєте компонент оболонки:
<script>
import Component from "./Component.svelte";
</script><main>
<Component>
<div slot="message">
<slot name="wrapperMessage"></slot>
</div>
</Component>
</main>
У цьому блоці коду ви передаєте інший іменований слот у слот повідомлення дочірнього компонента.
Потім у батьківському компоненті напишіть цей код:
<script>
import Wrapper from "./Wrapper.svelte";
</script><main>
This is the parent component
<Wrapper>
<div slot="wrapperMessage">
This is from the parent component
</div>
</Wrapper>
</main>
У наведеній вище структурі вміст «Це з батьківського компонента» передається через компонент-оболонку та безпосередньо в дочірній компонент завдяки слоту wrapperMessage всередині компонента-оболонки.
Зробіть собі життя легшим зі слотами Velte
Слоти — це потужна функція в Svelte, яка дозволяє створювати компоненти, які можна багаторазово використовувати. Ви навчилися створювати основні слоти, іменовані слоти, використовувати атрибути слотів тощо. Розуміючи різні типи слотів і способи їх використання, ви можете створювати динамічні та гнучкі інтерфейси користувача.