كيفية استخدام فتحات في Svelte

يقدم Svelte طرقًا مختلفة لتواصل المكونات مع بعضها البعض، بما في ذلك الدعائم والفتحات وما إلى ذلك. ستحتاج إلى دمج الفتحات لإنشاء مكونات مرنة وقابلة لإعادة الاستخدام في تطبيقات Svelte الخاصة بك.

فهم فتحات في Svelte

فتحات في إطار Svelte العمل بالمثل فتحات في فيو. أنها توفر وسيلة لتمرير المحتوى من أحد الوالدين إلى مكون تابع. باستخدام الفتحات، يمكنك تحديد العناصر النائبة داخل قالب المكون حيث يمكنك إدخال المحتوى من المكون الأصلي.

يمكن أن يكون هذا المحتوى نصًا عاديًا، ترميز 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 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. في حدود النصي العلامة، تعلن المتغير رسالة وقم بتعيين النص "Hello Parent Component!" إليها. يمكنك أيضًا تمرير متغير الرسالة إلى دعامة الفتحة رسالة. وهذا يجعل بيانات الرسالة متاحة للمكون الأصلي عندما يقوم بإدخال المحتوى في هذه الفتحة.

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

العمل مع الفتحات المسماة

يمكنك استخدام الفتحات المسماة عندما تريد تمرير فتحات متعددة في مكوناتك. تسهل الفتحات المُسمّاة إدارة الفتحات المختلفة، حيث يمكنك إعطاء كل فتحة اسمًا فريدًا. باستخدام الفتحات المسماة، يمكنك إنشاء مكونات معقدة بتخطيطات مختلفة.

لإنشاء فتحة مسماة، قم بتمرير a اسم دعم ل فتحة عنصر:

<div>
 This is the child component

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

في هذا المثال، هناك فتحتان مسماتان، الفتحة المسماة header والفتحة المسماة تذييل. باستخدام فتحة support، يمكنك تمرير المحتوى إلى كل فتحة من المكون الأصلي.

على سبيل المثال:

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

يوضح هذا الرمز كيفية استخدام فتحة دعم لتمرير المحتوى إلى فتحات مسماة. في الاول فترة العلامة، يمكنك تمرير فتحة الدعامة مع القيمة header. وهذا يضمن أن النص داخل فترة سيتم عرض العلامة في header فتحة. وبالمثل، النص داخل فترة العلامة مع فتحة قيمة الدعامة تذييل سوف تقدم في تذييل فتحة.

فهم إعادة توجيه الفتحة

تعد إعادة توجيه الفتحة ميزة في 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 فتحة داخل مكون المجمع.

اجعل حياتك أسهل مع فتحات Svelte

تعد الفتحات ميزة قوية في Svelte تتيح لك إنشاء مكونات قابلة للتخصيص بدرجة كبيرة وقابلة لإعادة الاستخدام. لقد تعلمت كيفية إنشاء فتحات أساسية، وفتحات مسماة، واستخدام دعائم الفتحات، وما إلى ذلك. ومن خلال فهم الأنواع المختلفة للفتحات وكيفية استخدامها، يمكنك إنشاء واجهات مستخدم ديناميكية ومرنة.