כיצד להשתמש בחריצים ב-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 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. בתוך ה תַסרִיט תג, אתה מצהיר על המשתנה הוֹדָעָה ולהקצות את הטקסט "שלום הורה רכיב!" אליו. אתה גם מעביר את משתנה ההודעה למפרץ החריץ הוֹדָעָה. זה הופך את נתוני ההודעה לזמינים לרכיב האב כאשר הוא מחדיר תוכן למשבצת זו.

<script>
 import Component from "./Component.svelte";
script>
<main>
 This is the parent component
<Componentlet: message>
<div>
 The child component says {message}
div>
Component>
main>

ה תן: הודעה תחביר מאפשר לרכיב האב לגשת ל- הוֹדָעָה אבזר חריץ שרכיב הילד מספק. ה div של תג הוֹדָעָה משתנה הוא הנתונים מה- הוֹדָעָה אבזר חריץ.

שים לב שאינך מוגבל לאביזר משבצת בודד, אתה יכול להעביר מספר אבזרי משבצות לפי הצורך:

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

עבודה עם חריצים בעלי שם

אתה יכול להשתמש בחריצים בעלי שם כאשר אתה רוצה להעביר משבצות מרובות ברכיבים שלך. משבצות בשמות מקלים על ניהול משבצות שונות, מכיוון שניתן לתת לכל משבצת שם ייחודי. עם חריצים בעלי שם, אתה יכול לבנות רכיבים מורכבים עם פריסות משתנות.

כדי ליצור משבצת עם שם, העבר א שֵׁם תמיכה ל חָרִיץ אֵלֵמֶנט:

<div>
 This is the child component

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

בדוגמה זו, ישנם שני משבצות בשם, המשבצת בשם כּוֹתֶרֶת והחריץ על שם כותרת תחתונה. משתמש ב חָרִיץ prop, אתה יכול להעביר תוכן לכל משבצת מהרכיב האב.

לדוגמה:

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

קוד זה מדגים כיצד אתה משתמש ב- חָרִיץ אביזר להעביר תוכן למשבצות עם שם. בראשון לְהַקִיף תג, אתה עובר את חָרִיץ הצמד עם הערך כּוֹתֶרֶת. זה מבטיח שהטקסט בתוך לְהַקִיף תג יוצג ב- כּוֹתֶרֶת חָרִיץ. באופן דומה, הטקסט בתוך לְהַקִיף תג עם ה חָרִיץ ערכו של אבזר כותרת תחתונה יציג ב כותרת תחתונה חָרִיץ.

הבנת העברת חריצים

העברת משבצות היא תכונה ב-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 המאפשרת לך ליצור רכיבים הניתנים להתאמה אישית ושימוש חוזר. למדת כיצד ליצור משבצות בסיסיות, משבצות בשמות, להשתמש באביזרים של משבצות וכו'. על ידי הבנת הסוגים השונים של חריצים וכיצד להשתמש בהם, אתה יכול לבנות ממשקי משתמש דינמיים וגמישים.