Слотовете улесняват предаването на данни от един компонент към друг. Научете как да започнете да ги използвате за създаване на динамични компоненти.

Svelte предлага различни начини компонентите да комуникират помежду си, включително подпори, слотове и т.н. Ще трябва да интегрирате слотове, за да създадете гъвкави и многократно използвани компоненти във вашите приложения на Svelte.

Разбиране на слотовете в Svelte

Слотове в рамката на Svelte работят подобно на слотове във Vue. Те предоставят начин за предаване на съдържание от родителски към дъщерен компонент. Със слотовете можете да дефинирате контейнери в рамките на шаблон на компонент, където можете да инжектирате съдържание от родителски компонент.

Това съдържание може да бъде обикновен текст, HTML маркиране, или други компоненти на Svelte. Работата със слотове ви дава възможност да създавате високо адаптивни и динамични компоненти, които се адаптират към различни случаи на употреба.

Създаване на основен слот

За да създадете слот в Svelte, използвайте

instagram viewer
слот елемент в рамките на шаблон на компонент. The слот елемент е контейнер за съдържанието, което ще предадете от родителския компонент. По подразбиране слотът ще рендира всяко съдържание, което му е предадено.

Ето пример как да създадете основен слот:

<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 componentspan>
Component>
main>

В допълнение към предаването на съдържание от компонентите от родител към дете, можете да предоставите резервно съдържание/съдържание по подразбиране в слотовете. Това съдържание ще покаже слотът, ако родителският компонент не предава никакво съдържание.

Ето как можете да подадете резервно съдържание:

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

Този кодов блок предоставя текста „Резервно съдържание“ като резервно съдържание за слота за показване, ако родителският компонент не предоставя никакво съдържание.

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

Svelte ви позволява да предавате данни към слотове, като използвате подпори за слотове. Използвате реквизитите на слота в ситуации, в които искате да предадете някои данни от дъщерния компонент към съдържанието, в което поставяте.

Например:

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

Кодовият блок по-горе представлява компонент на Svelte. В рамките на сценарий етикет, вие декларирате променливата съобщение и присвоете текста "Здравей родителски компонент!" към него. Можете също така да подадете променливата на съобщението към подложката на слота съобщение. Това прави данните за съобщението достъпни за родителския компонент, когато той инжектира съдържание в този слот.

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

The нека: съобщение синтаксис позволява на родителския компонент да има достъп до съобщение проп за слот, който дъщерният компонент предоставя. The див етикети съобщение променливата са данните от съобщение слот опора.

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

<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>

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

Можете да използвате наименувани слотове, когато искате да предадете множество слотове във вашите компоненти. Наименуваните слотове улесняват управлението на различни слотове, тъй като можете да дадете на всеки слот уникално име. С именувани слотове можете да създавате сложни компоненти с различни оформления.

За да създадете наименуван слот, подайте a име опора на слот елемент:

<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>

В горната структура съдържанието „Това е от родителския компонент“ се предава през компонента за обвивка и директно в дъщерния компонент благодарение на wrapperMessage слот вътре в компонента на обвивката.

Направете живота си по-лесен със слотове Velte

Слотовете са мощна функция в Svelte, която ви позволява да създавате високо адаптивни и многократно използвани компоненти. Научихте как да създавате основни слотове, именувани слотове, да използвате подпори за слотове и т.н. Като разберете различните видове слотове и как да ги използвате, можете да изградите динамични и гъвкави потребителски интерфейси.