كيفية العمل مع الدعائم في Svelte

تعرف على كيفية العمل مع الدعائم في Svelte ودع مكونين مع علاقة الوالدين / الطفل يتواصلان مع بعضهما البعض

يمكنك استيراد مكون Svelte إلى أي مكون آخر باستخدام بناء الجملةimport ComponentName from 'componentPath':

<script>
import SignupForm from './SignupForm.svelte';
</script>

المسار متعلق بمسار المكون الحالي../يعني "هذا المجلد نفسه". كنت ستستخدم../للعودة إلى مجلد واحد ، وهكذا.

بمجرد القيام بذلك ، يمكنك استخدام المكون الذي تم استيراده حديثًا في الترميز ، مثل علامة HTML:

<SignupForm />

بهذه الطريقة ، تقوم بتكوين علاقة أصل / فرعي بين المكونين: المكون الذي يتم استيراده والعنصر الذي يتم استيراده.

غالبًا ما تريد أن يقوم المكون الأصلي بتمرير البيانات إلى المكون الفرعي.

يمكنك القيام بذلك باستخدامالدعائم. تتصرف الدعائم بشكل مشابه للسمات في HTML العادي ، وهي شكل من أشكال الاتصال أحادي الاتجاه.

في هذا المثال نمرر الامتدادdisabledprop ، لتمرير قيمة JavaScripttrueإليها:

<SignupForm disabled={true}/>

في مكون SignupForm ، تحتاج إلىيصدرالdisabledدعامة ، بهذه الطريقة:

<script>
  export let disabled
</script>

هذه هي الطريقة التي تعبر بها عن حقيقة أن الدعامة تتعرض للمكونات الرئيسية.

عند استخدام المكون ، يمكنك تمرير متغير بدلاً من قيمة لتغييره ديناميكيًا:

<script>
import SignupForm from './SignupForm.svelte';
let disabled = true
</script>
<SignupForm disabled={disabled}/>

عندماdisabledتتغير القيمة المتغيرة ، سيتم تحديث المكون الفرعي بقيمة الخاصية الجديدة. مثال:

<script>
import SignupForm from './SignupForm.svelte';
let disabled = true
setTimeout(() => { disabled = false }, 2000)
</script>
<SignupForm disabled={disabled}/>

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

كيفية العمل مع الدعائم في Svelte

تعرف على كيفية العمل مع الدعائم في Svelte ودع مكونين مع علاقة الوالدين / الطفل يتواصلان مع بعضهما البعض

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