स्लॉट डेटा को एक घटक से दूसरे घटक तक भेजना आसान बनाते हैं। जानें कि गतिशील घटक बनाने के लिए उनका उपयोग कैसे शुरू करें।

Svelte घटकों को एक-दूसरे के साथ संवाद करने के लिए अलग-अलग तरीके प्रदान करता है, जिसमें प्रॉप्स, स्लॉट आदि शामिल हैं। आपको अपने Svelte अनुप्रयोगों में लचीले और पुन: प्रयोज्य घटकों को बनाने के लिए स्लॉट को एकीकृत करने की आवश्यकता होगी।

स्वेल्ट में स्लॉट को समझना

में स्लॉट स्वेल्ट ढाँचा के समान कार्य करें Vue में स्लॉट. वे माता-पिता से बाल घटक तक सामग्री को स्थानांतरित करने का एक तरीका प्रदान करते हैं। स्लॉट्स के साथ, आप एक घटक के टेम्पलेट के भीतर प्लेसहोल्डर्स को परिभाषित कर सकते हैं जहां आप मूल घटक से सामग्री इंजेक्ट कर सकते हैं।

यह सामग्री सादा पाठ हो सकती है, HTML मार्कअप, या अन्य Svelte घटक। स्लॉट्स के साथ काम करने से आप उच्च अनुकूलन योग्य और गतिशील घटक बना सकते हैं जो विभिन्न उपयोग के मामलों के अनुकूल होते हैं।

एक बेसिक स्लॉट बनाना

Svelte में एक स्लॉट बनाने के लिए, का उपयोग करें छेद किसी घटक के टेम्पलेट के भीतर तत्व। छेद तत्व उस सामग्री के लिए प्लेसहोल्डर है जिसे आप मूल घटक से पास करेंगे। डिफ़ॉल्ट रूप से, स्लॉट इसे पास की गई किसी भी सामग्री को प्रस्तुत करेगा।

instagram viewer

बुनियादी स्लॉट कैसे बनाएं इसका एक उदाहरण यहां दिया गया है:

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

चलो: संदेश सिंटैक्स मूल घटक को एक्सेस करने की अनुमति देता है संदेश स्लॉट प्रोप जो चाइल्ड कंपोनेंट प्रदान करता है। डिव टैग संदेश वेरिएबल से डेटा है संदेश स्लॉट प्रोप.

ध्यान दें कि आप एक एकल स्लॉट प्रॉप तक सीमित नहीं हैं, आप आवश्यकतानुसार एकाधिक स्लॉट प्रॉप्स पास कर सकते हैं:

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

इस उदाहरण में, दो नामांकित स्लॉट हैं, स्लॉट नाम दिया गया है हैडर और स्लॉट का नाम दिया गया FOOTER. का उपयोग छेद प्रोप, आप मूल घटक से प्रत्येक स्लॉट में सामग्री पास कर सकते हैं।

उदाहरण के लिए:

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

यह कोड दर्शाता है कि आप इसका उपयोग कैसे करते हैं छेद नामित स्लॉट में सामग्री भेजने के लिए प्रोप। पहले में अवधि टैग, आप पास हो गए छेद मूल्य के साथ प्रोप हैडर. यह सुनिश्चित करता है कि पाठ के भीतर अवधि टैग में रेंडर होगा हैडर छेद। इसी प्रकार, पाठ के भीतर अवधि के साथ टैग करें छेद प्रॉप का मूल्य FOOTER में प्रस्तुत करेगा FOOTER छेद।

स्लॉट अग्रेषण को समझना

स्लॉट फ़ॉरवर्डिंग 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>

उपरोक्त संरचना में, सामग्री "यह मूल घटक से है" रैपर घटक के माध्यम से और सीधे चाइल्ड घटक में पारित हो जाती है, इसके लिए धन्यवाद रैपरमैसेज रैपर घटक के अंदर स्लॉट।

व्यापक स्लॉट के साथ अपना जीवन आसान बनाएं

Svelte में स्लॉट एक शक्तिशाली सुविधा है जो आपको उच्च अनुकूलन योग्य और पुन: प्रयोज्य घटक बनाने की अनुमति देती है। आपने बुनियादी स्लॉट बनाना, नामित स्लॉट बनाना, स्लॉट प्रॉप्स का उपयोग करना आदि सीख लिया है। विभिन्न प्रकार के स्लॉट और उनका उपयोग करने के तरीके को समझकर, आप गतिशील और लचीले उपयोगकर्ता इंटरफ़ेस का निर्माण कर सकते हैं।