Svelte'de Slotlar Nasıl Kullanılır

Svelte, bileşenlerin birbirleriyle iletişim kurması için aksesuarlar, yuvalar vb. dahil olmak üzere farklı yollar sunar. Svelte uygulamalarınızda esnek ve yeniden kullanılabilir bileşenler oluşturmak için yuvaları entegre etmeniz gerekecektir.

Svelte'deki Slotları Anlamak

Yuvalar Svelte çerçevesi benzer şekilde çalışmak Vue'daki yuvalar. İçeriği bir üst bileşenden alt bileşene aktarmanın bir yolunu sağlarlar. Yuvalarla, bir bileşenin şablonu içinde, bir üst bileşenden içerik enjekte edebileceğiniz yer tutucular tanımlayabilirsiniz.

Bu içerik düz metin olabilir, HTML işaretlemesiveya diğer Svelte bileşenleri. Yuvalarla çalışmak, farklı kullanım durumlarına uyum sağlayan son derece özelleştirilebilir ve dinamik bileşenler oluşturmanıza olanak tanır.

Temel Yuva Oluşturma

Svelte'de bir yuva oluşturmak için yuva Bir bileşenin şablonundaki öğe.

yuva element, ana bileşenden ileteceğiniz içerik için bir yer tutucudur. Varsayılan olarak yuva, kendisine iletilen tüm içeriği işleyecektir.

Temel bir slotun nasıl oluşturulacağına dair bir örnek:

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

Yukarıdaki kod bloğu, bir ana bileşenden içerik almak için slot öğesini kullanan bir alt bileşeni temsil eder.

İçeriği bir üst bileşenden bir alt bileşene aktarmak için öncelikle alt bileşeni üst bileşene aktaracaksınız. Daha sonra, alt bileşeni oluşturmak için kendi kendine kapanan bir etiket kullanmak yerine bir açma ve kapatma etiketi kullanın. Son olarak bileşenin etiketlerinin içine ebeveynden çocuğa bileşenden aktarmak istediğiniz içeriği yazın.

Örneğin:

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

Ebeveyn-çocuk bileşenlerden içerik aktarmanın yanı sıra, yuvalarda yedek/varsayılan içerik de sağlayabilirsiniz. Bu içerik, ana bileşenin herhangi bir içerik iletmemesi durumunda yuvanın görüntüleyeceği içeriktir.

Bir yedek içeriği şu şekilde iletebilirsiniz:

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

Bu kod bloğu, ana bileşenin herhangi bir içerik sağlamaması durumunda yuvanın görüntüleyeceği bir yedek içerik olarak "Yedek İçerik" metnini sağlar.

Slot Props'larıyla Slot Üzerinden Veri Aktarma

Svelte, slot donanımlarını kullanarak verileri slotlara aktarmanıza olanak tanır. Alt bileşenden bazı verileri yerleştirdiğiniz içeriğe aktarmak istediğiniz durumlarda slot desteklerini kullanırsınız.

Örneğin:

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

Yukarıdaki kod bloğu bir Svelte bileşenini temsil eder. İçinde senaryo etiketi, değişkeni bildirirsiniz İleti ve "Merhaba Ana Bileşen!" metnini atayın. ona. Ayrıca mesaj değişkenini slot desteğine iletirsiniz İleti. Bu, bu yuvaya içerik enjekte ettiğinde mesaj verilerinin ana bileşen tarafından kullanılabilir olmasını sağlar.

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

izin ver: mesaj sözdizimi ana bileşenin İleti alt bileşenin sağladığı slot desteği. div etiket İleti değişken, gelen verilerdir İleti slot desteği.

Tek bir yuva nesnesi ile sınırlı olmadığınızı unutmayın; gerektiği gibi birden fazla yuva nesnesini aktarabilirsiniz:

<script>
 let user = {
 firstName: 'John',
 lastName: 'Doe'
 };
script>
<main>
 This is the child component
<slotfirstName={user.firstName}lastName={user.lastName}>slot>
main>

Ana bileşende:

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

Adlandırılmış Yuvalarla Çalışma

Bileşenlerinizde birden fazla yuva geçirmek istediğinizde adlandırılmış yuvaları kullanabilirsiniz. Adlandırılmış yuvalar, her yuvaya benzersiz bir ad verebildiğiniz için çeşitli yuvaları yönetmeyi kolaylaştırır. Adlandırılmış yuvalarla, farklı düzenlere sahip karmaşık bileşenler oluşturabilirsiniz.

Adlandırılmış bir yuva oluşturmak için bir iletin isim desteklemek yuva eleman:

<div>
 This is the child component

<p>Header: <slotname='header'>slot>p>
<p>Footer: <slotname='footer'>slot>p>
div>

Bu örnekte iki adlandırılmış yuva vardır; yuvanın adı başlık ve adı verilen yuva altbilgi. Kullanmak yuva prop'ı kullanarak ana bileşenden her yuvaya içerik aktarabilirsiniz.

Örneğin:

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

Bu kod, nasıl kullandığınızı gösterir. yuva içeriği adlandırılmış yuvalara aktarmak için prop. İlk olarak açıklık etiketle, sen geç yuva değere sahip destek başlık. Bu, içindeki metnin açıklık etiketi şu şekilde oluşturulacak: başlık yuvası. Benzer şekilde, içindeki metin açıklık ile etiketleyin yuva pervanenin değeri altbilgi içinde işlenecek altbilgi yuvası.

Slot Yönlendirmeyi Anlamak

Yuva iletme, Svelte'de bir ana bileşenden içeriği bir sarmalayıcı bileşen aracılığıyla bir alt bileşene aktarmanıza olanak tanıyan bir özelliktir. İlgisiz bileşenlerden içerik aktarmak istediğiniz durumlarda bu çok yararlı olabilir.

Burada slot yönlendirmenin nasıl kullanılacağına dair bir örnek verilmiştir; önce alt bileşeni oluşturun:

<main>
 This is the child component
<slotname="message">slot>
main>

Daha sonra sarma bileşenini oluşturursunuz:

<script>
 import Component from "./Component.svelte";
script>
<main>
<Component>
<divslot='message'>
<slotname="wrapperMessage">slot>
div>
Component>
main>

Bu kod bloğunda, adlandırılmış başka bir yuvayı İleti alt bileşenin yuvası.

Daha sonra ana bileşene şu kodu yazın:

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

Yukarıdaki yapıda "Bu ana bileşendendir" içeriği sarmalayıcı bileşenden geçerek doğrudan alt bileşene aktarılır. sarmalayıcıMesaj sarma bileşeninin içindeki yuva.

Svelte Slotlarla Hayatınızı Kolaylaştırın

Yuvalar, Svelte'de son derece özelleştirilebilir ve yeniden kullanılabilir bileşenler oluşturmanıza olanak tanıyan güçlü bir özelliktir. Temel slotları nasıl oluşturacağınızı, slotları nasıl adlandıracağınızı, slot aksesuarlarını nasıl kullanacağınızı vb. öğrendiniz. Farklı slot türlerini ve bunların nasıl kullanılacağını anlayarak dinamik ve esnek kullanıcı arayüzleri oluşturabilirsiniz.