فتحات رشيقة

كيفية العمل مع الفتحات في Svelte لتحديد المكونات التي يمكن تكوينها معًا

تعد الفتحات طريقة سهلة لتمكنك من تحديد المكونات التي يمكن تكوينها معًا.

والعكس صحيح ، اعتمادًا على وجهة نظرك ، تعد الفتحات طريقة سهلة لتكوين مكون تقوم باستيراده.

إليك كيفية عملهم.

في أحد المكونات ، يمكنك تحديد فتحة باستخدام الامتداد<slot />(أو<slot></slot>) بناء الجملة.

هنا أButton.svelteالمكون الذي يطبع ملف<button>علامة HTML:

<button><slot /></button>

بالنسبة لمطوري React ، هذا في الأساس هو نفسه<button>{props.children}</button>

يمكن لأي مكون يقوم باستيراده تحديد المحتوى الذي سيتم وضعه في الفتحة عن طريق إضافته إلى علامتي الفتح والإغلاق للمكون:

<script>
import Button from './Button.svelte'
</script>
<Button>Insert this into the slot</Button>

يمكنك تحديد الإعداد الافتراضي ، والذي يتم استخدامه إذا لم يتم ملء الخانة الزمنية:

<button>
  <slot>
    Default text for the button
  </slot>
</button>

يمكن أن يكون لديك أكثر من فتحة في أحد المكونات ، ويمكنك تمييز واحدة عن الأخرى باستخدام فتحات مسماة. ستكون الفتحة الفردية غير المسماة هي الفتحة الافتراضية:

<slot name="before" />
<button>
  <slot />
</button>
<slot name="after" />

إليك كيف ستستخدمه:

<script>
import Button from './Button.svelte'
</script>
<Button>
Insert this into the slot
<p slot=“before”>Add this before</p>
<p slot=“after”>Add this after</p>
</Button>

وهذا من شأنه أن يعرض ما يلي لـ DOM:

<p slot="before">Add this before</p>
<button>
  Insert this into the slot
</button>
<p slot="after">Add this after</p>

تحميل مجانيكتيب Svelte

فتحات رشيقة

كيفية العمل مع الفتحات في Svelte لتحديد المكونات التي يمكن تكوينها معًا

المزيد من البرامج التعليمية svelte: