Како користити слотове у Свелтеу

Свелте нуди различите начине да компоненте комуницирају једна са другом, укључујући реквизите, уторе, итд. Мораћете да интегришете слотове да бисте креирали флексибилне компоненте за вишекратну употребу у вашим Свелте апликацијама.

Разумевање слотова у Свелтеу

Слотс ин оквир Свелте раде слично као слотови у Вуе-у. Они пружају начин да се садржај пренесе са родитељске на подређену компоненту. Са слотовима, можете дефинисати чуваре места унутар шаблона компоненте где можете убацити садржај из надређене компоненте.

Овај садржај може бити обичан текст, ХТМЛ маркуп, или друге Свелте компоненте. Рад са слотовима вам омогућава да креирате веома прилагодљиве и динамичке компоненте које се прилагођавају различитим случајевима употребе.

Креирање основног слота

Да бисте креирали слот у Свелтеу, користите слот елемент унутар шаблона компоненте. Тхе слот елемент је чувар места за садржај који ћете проследити из надређене компоненте. Подразумевано, слот ће приказати сав садржај који му је прослеђен.

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

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

Овај блок кода обезбеђује текст „Резервни садржај“ као резервни садржај за приказ утора ако надређена компонента не пружа никакав садржај.

Преношење података преко слота са слот реквизитима

Свелте вам омогућава да пренесете податке у слотове користећи реквизите за слотове. Користите реквизите за слот у ситуацијама када желите да пренесете неке податке из подређене компоненте у садржај у који постављате.

На пример:

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

Блок кода изнад представља компоненту Свелте. У оквиру скрипта таг, декларишете променљиву порука и доделите текст "Здраво родитељска компонента!" на то. Такође прослеђујете променљиву поруке у слот проп порука. Ово чини податке поруке доступним родитељској компоненти када убацује садржај у овај слот.

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

Тхе нека: порука синтакса омогућава родитељској компоненти да приступи порука слот проп који дете компонента обезбеђује. Тхе див ознаке порука променљива је податак из порука слот проп.

Имајте на уму да нисте ограничени на један реквизит слота, можете да проследите вишеструке пропс слота по потреби:

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

У овом примеру, постоје два именована слота, слот именовани заглавље и слот именован фоотер. Помоћу слот проп, можете проследити садржај у сваки слот из надређене компоненте.

На пример:

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

Овај код показује како користите слот проп за прослеђивање садржаја именованим слотовима. У првом спан ознаку, прођете слот проп са вредношћу заглавље. Ово осигурава да текст унутар спан таг ће се приказати у заглавље слот. Слично, текст унутар спан означити са слот вредност реквизита фоотер ће изнети у фоотер слот.

Разумевање прослеђивања слотова

Прослеђивање утора је функција у Свелте-у која вам омогућава да пренесете садржај из надређене компоненте кроз компоненту омотача у подређену компоненту. Ово може бити веома корисно у случајевима када желите да пренесете садржај из неповезаних компоненти.

Ево примера како да користите прослеђивање места, прво креирајте подређену компоненту:

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

У горњој структури, садржај „Ово је из надређене компоненте“ пролази кроз компоненту омотача и директно у подређену компоненту захваљујући врапперМессаге слот унутар компоненте омотача.

Олакшајте свој живот са Свелте слотовима

Слотови су моћна карактеристика у Свелте-у која вам омогућава да креирате веома прилагодљиве и вишекратне компоненте. Научили сте како да креирате основне слотове, именоване слотове, користите реквизите за слотове, итд. Разумевањем различитих типова слотова и начина на који их користите, можете изградити динамична и флексибилна корисничка интерфејса.