نحوه استفاده از اسلات در Svelte

اسلات ها انتقال داده ها از یک جزء به جزء دیگر را آسان تر می کنند. یاد بگیرید که چگونه شروع به استفاده از آنها برای ایجاد اجزای پویا کنید.

Svelte راه‌های مختلفی را برای برقراری ارتباط اجزا با یکدیگر ارائه می‌کند، از جمله ابزارها، اسلات‌ها و غیره. برای ایجاد اجزای انعطاف‌پذیر و قابل استفاده مجدد در برنامه‌های Svelte خود باید اسلات‌ها را ادغام کنید.

درک اسلات در Svelte

اسلات ها در چارچوب Svelte مشابه اسلات ها در Vue کار می کنند. آنها راهی برای انتقال محتوا از والدین به مؤلفه فرزند ارائه می دهند. با اسلات ها، می توانید متغیرهایی را در قالب یک مؤلفه تعریف کنید که در آن می توانید محتوا را از یک مؤلفه والد تزریق کنید.

این محتوا می تواند متن ساده، نشانه گذاری HTML یا سایر اجزای Svelte باشد. کار با اسلات شما را قادر می سازد تا اجزای بسیار قابل تنظیم و پویا ایجاد کنید که با موارد استفاده مختلف سازگار می شوند.

ایجاد یک اسلات اولیه

برای ایجاد یک اسلات در Svelte، از عنصر اسلات در قالب یک جزء استفاده کنید. عنصر اسلات یک مکان نگهدار برای محتوایی است که از مؤلفه والد ارسال می کنید. به طور پیش‌فرض، اسلات هر محتوایی را که به آن ارسال می‌شود ارائه می‌کند.

در اینجا مثالی از نحوه ایجاد یک اسلات اولیه آورده شده است:

<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!” به آن شما همچنین متغیر پیام را به پیغام slot prop ارسال می کنید. این باعث می شود که داده های پیام در هنگام تزریق محتوا به این شکاف در اختیار مؤلفه والد قرار گیرد.

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

کار با اسلات های نامگذاری شده

هنگامی که می خواهید چندین اسلات را در اجزای خود ارسال کنید، می توانید از اسلات های نامگذاری شده استفاده کنید. اسلات های نامگذاری شده مدیریت اسلات های مختلف را آسان تر می کند، زیرا می توانید به هر شکاف یک نام منحصر به فرد بدهید. با اسلات های نامگذاری شده، می توانید اجزای پیچیده با طرح بندی های مختلف بسازید.

برای ایجاد یک اسلات با نام، یک نام prop به عنصر اسلات ارسال کنید:

<div>
  This is the child component
  
  <p>Header: <slot name='header'></slot></p>
  <p>Footer: <slot name='footer'></slot></p>
</div>

در این مثال، دو اسلات با نام وجود دارد، اسلات به نام header و اسلات با نام footer. با استفاده از پایه اسلات، می توانید محتوا را از مولفه اصلی به هر شکاف منتقل کنید.

مثلا:

<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، slot prop را با هدر مقدار ارسال می کنید. این تضمین می کند که متن درون تگ span در شکاف هدر رندر می شود. به طور مشابه، متن درون تگ span با پاورقی مقدار پایه اسلات در شکاف پاورقی ارائه می شود.

درک حمل و نقل اسلات

Slot Forwarding یک ویژگی در Svelte است که به شما امکان می دهد محتوا را از یک جزء اصلی از طریق یک جزء wrapper به یک جزء فرزند منتقل کنید. این می تواند در مواردی که می خواهید محتوا را از اجزای نامرتبط ارسال کنید بسیار مفید باشد.

در اینجا مثالی از نحوه استفاده از Slot Forwarding آورده شده است، ابتدا مؤلفه فرزند را ایجاد کنید:

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

بعد، کامپوننت wrapper را ایجاد می کنید:

<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 در داخل مولفه wrapper از طریق کامپوننت wrapper و مستقیماً به جزء فرزند منتقل می شود.

با Svelte Slots زندگی خود را آسان‌تر کنید

Slots یک ویژگی قدرتمند در Svelte است که به شما امکان می دهد اجزای بسیار قابل تنظیم و استفاده مجدد را ایجاد کنید. شما نحوه ایجاد اسلات های اساسی، اسلات های نامگذاری شده، استفاده از اسلات و غیره را یاد گرفته اید. با درک انواع مختلف اسلات ها و نحوه استفاده از آنها، می توانید رابط های کاربری پویا و انعطاف پذیر بسازید.

منبع مقاله