Свелте нуди различите начине да компоненте комуницирају једна са другом, укључујући реквизите, уторе, итд. Мораћете да интегришете слотове да бисте креирали флексибилне компоненте које се могу поново користити у вашим Свелте апликацијама.
Преглед садржаја
Разумевање слотова у Свелтеу
Слотови у Свелте оквиру раде слично слотовима у Вуе-у. Они пружају начин да се садржај пренесе са родитељске на подређену компоненту. Са слотовима, можете дефинисати чуваре места унутар шаблона компоненте где можете убацити садржај из надређене компоненте.
Овај садржај може бити обичан текст, ХТМЛ ознаке или друге Свелте компоненте. Рад са слотовима вам омогућава да креирате веома прилагодљиве и динамичке компоненте које се прилагођавају различитим случајевима употребе.
Креирање основног слота
Да бисте креирали слот у Свелтеу, користите елемент слот унутар шаблона компоненте. Елемент слот је чувар места за садржај који ћете проследити из надређене компоненте. Подразумевано, слот ће приказати сав садржај који му је прослеђен.
Ево примера како да направите основни слот:
<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>
Овај блок кода обезбеђује текст „Фаллбацк Цонтент“ као резервни садржај за приказ утора ако надређена компонента не пружа никакав садржај.
Преношење података преко слота са слот реквизитима
Свелте вам омогућава да пренесете податке у слотове користећи реквизите за слотове. Користите реквизите за слот у ситуацијама када желите да пренесете неке податке из подређене компоненте у садржај у који постављате.
На пример:
<script>
let message="Hello Parent Component!"
</script><main>
This is the child component
<slot message={message}></slot>
</main>
Блок кода изнад представља компоненту Свелте. Унутар ознаке скрипте декларишете поруку променљиве и додељујете јој текст „Здраво, родитељска компонента!“ на то. Такође прослеђујете променљиву поруке у поруку пропс-а. Ово чини податке поруке доступним родитељској компоненти када убацује садржај у овај слот.
<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>
Синтакса лет:мессаге омогућава родитељској компоненти да приступи пропу слота за поруке који обезбеђује подређена компонента. Променљива поруке див ознаке су подаци из пропса слота за поруке.
Имајте на уму да нисте ограничени на један реквизит слота, можете да проследите вишеструке пропс слота по потреби:
<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>
Рад са именованим слотовима
Можете користити именоване слотове када желите да проследите више слотова у вашим компонентама. Именовани слотови олакшавају управљање различитим слотовима, јер сваком слоту можете дати јединствено име. Са именованим слотовима, можете да направите сложене компоненте са различитим распоредима.
Да бисте креирали именовани слот, проследите наме проп елементу слота:
<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>
Овај код показује како користите слот проп за прослеђивање садржаја именованим слотовима. У првој ознаци спан, проследите слот проп са заглављем вредности. Ово осигурава да ће се текст унутар ознаке спан приказати у прорезу заглавља. Слично томе, текст унутар ознаке спан са подножјем вредности пропратног места ће се приказати у утору подножја.
Разумевање прослеђивања слотова
Прослеђивање утора је функција у Свелте-у која вам омогућава да пренесете садржај из надређене компоненте кроз компоненту омотача у подређену компоненту. Ово може бити веома корисно у случајевима када желите да пренесете садржај из неповезаних компоненти.
Ево примера како да користите прослеђивање места, прво креирајте подређену компоненту:
<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>
У горњој структури, садржај „Ово је из надређене компоненте“ пролази кроз компоненту омотача и директно у подређену компоненту захваљујући слоту врапперМессаге унутар компоненте омотача.
Олакшајте свој живот уз Свелте слотове
Слотови су моћна функција у Свелте-у која вам омогућава да креирате веома прилагодљиве и вишекратне компоненте. Научили сте како да креирате основне слотове, именоване слотове, користите реквизите за слотове, итд. Разумевањем различитих типова слотова и начина на који их користите, можете изградити динамична и флексибилна корисничка интерфејса.