كيفية تصدير الوظائف والمتغيرات من مكون Svelte

تعرف على كيفية تصدير الوظائف والمتغيرات من مكون Svelte

أنت تعلم أنه يمكنك استيراد مكون Svelte إلى آخر باستخدام بناء الجملة

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

ماذا لو كنت تريد تصدير شيء أكثر من التصدير الافتراضي؟

حسنًا ، يجب عليك تصديره من ملفscriptعلامة في المكون ، معcontext="module"ينسب.

هنا مثال. لنفترض أن لديك مكون زر بتنسيقButton.svelte:

<button>A button</button>

وتريد أن توفر للمكونات الأخرى القدرة على تغيير لون الزر. يمكنك استخدام الدعائم ، هذا مثال واحد. أو يمكنك توفير وظيفة تسمىchangeColor.

تكتبها وتصدرها في هذا الخاصscriptبطاقة شعار:

<script context="module">
export function changeColor() {
  //...add logic..
}
</script>

<button>A button</button>

تحذير: لم أقم بتنفيذ الوظيفة الفعلية ، لكنك فهمت الفكرة.

لاحظ أنه يمكن أن يكون لديك علامة نصية "عادية" أخرى ، في المكون.

الآن يمكن للمكونات الأخرى استيراد Button ، وهو التصدير الافتراضي ، وchangeColorوظيفة أيضا:

<script>
import Button, { changeColor } from './Button.svelte'
</script>

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


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