Vue Academy · पाठ

Dynamic Slot Names

v-slot:[dynamicName], programmatic slot selection और conditional slot rendering।

पाठ 3, कुल 4 में से13 चरण

Dynamic Slot Names, CoddyKit पर Vue Academy का एक निःशुल्क पाठ है। यह 4 में से 3वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह Vue Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Vue Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

गतिशील स्लॉट नाम क्यों

कभी-कभी जिस स्लॉट को भरना है, वह रनटाइम तक ज्ञात नहीं होता—यह किसी प्रॉप, स्थिति या लूप चर पर निर्भर करता है। Vue आपको वर्गाकार कोष्ठक सिंटैक्स से स्लॉट नाम की गणना करने देता है।

गतिशील आर्ग्युमेंट सिंटैक्स

v-slot: के बाद किसी एक्सप्रेशन को वर्गाकार कोष्ठकों में रखें। Vue उसका मूल्यांकन करके लक्षित स्लॉट का नाम निर्धारित करता है।

<MyComponent>
  <template v-slot:[dynamicName]>
    Goes into whatever slot dynamicName equals
  </template>
</MyComponent>

कोष्ठकों के साथ संक्षिप्त रूप

# संक्षिप्त रूप भी गतिशील आर्ग्युमेंट का समर्थन करता है।

<MyComponent>
  <template #[dynamicName]>
    Dynamic slot content
  </template>
</MyComponent>

स्थिति से नाम निर्धारित करना

कोष्ठक वाला एक्सप्रेशन किसी भी प्रतिक्रियाशील मान को पढ़ सकता है। चर को टॉगल करने पर सामग्री भरने वाला स्लॉट बदल जाता है।

const dynamicName = ref("header");
// later: dynamicName.value = "footer";

रेंडर की गई सामग्री बदलना

कई नामित स्लॉट परिभाषित करने वाले चाइल्ड के साथ मिलकर, गतिशील नाम एक ही टेम्पलेट को स्थिति के आधार पर अलग-अलग क्षेत्रों को सक्रिय करने देते हैं।

<!-- child has slots: header, body, footer -->
<Panel>
  <template #[activeSection]>
    Active content here
  </template>
</Panel>

प्रॉप्स से नाम चुनना

कॉम्पोनेंट प्रॉप स्लॉट तय कर सकता है। यह कॉन्फ़िगर किए जा सकने वाले रैपर के लिए उपयोगी है, जहाँ कॉल करने वाला क्षेत्र चुनता है।

const props = defineProps({ target: String });
// use props.target inside #[props.target]

गतिशील स्लॉट पर पुनरावृत्ति

आप लूप आइटम से प्रत्येक नाम की गणना करके स्लॉट को लूप में रेंडर कर सकते हैं—यह तालिका के कॉलम या टैब प्रणालियों के लिए उपयोगी है।

<template
  v-for="col in columns"
  v-slot:[col.name]="{ row }"
>
  {{ row[col.field] }}
</template>

लोअरकेस और मान्य नाम

गतिशील स्लॉट नामों का परिणाम मान्य स्ट्रिंग होना चाहिए। Null को डिफ़ॉल्ट स्लॉट माना जाता है। इनलाइन टेम्पलेट का उपयोग करते समय रिक्त स्थान और HTML विशेषता नामों में अमान्य वर्णों से बचें।

const name = condition ? "primary" : null;
// null -> default slot

सशर्त स्लॉट चयन

कोष्ठकों के भीतर टर्नरी किसी शर्त के आधार पर स्लॉटों में से एक चुनता है, वह भी सीधे टेम्पलेट में।

<Alert>
  <template #[isError ? 'error' : 'info']>
    {{ message }}
  </template>
</Alert>

टैब कॉम्पोनेंट का उपयोग-प्रसंग

Tabs कॉम्पोनेंट चुने गए टैब आईडी से स्लॉट नाम की गणना करके सक्रिय टैब की सामग्री रेंडर कर सकता है, जिससे पैरेंट घोषणात्मक बना रहता है।

<Tabs>
  <template #[currentTab]>
    {{ tabContent }}
  </template>
</Tabs>

इसे पठनीय रखें

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

त्वरित जाँच

कौन-सा सिंटैक्स उस स्लॉट का चयन करता है जिसका नाम रनटाइम पर निर्धारित होता है?

इंटरैक्टिव पाठ में इसका उत्तर दें

पुनरावलोकन

आपने सीखा कि गतिशील स्लॉट नाम यह तय करने के लिए वर्ग-कोष्ठक सिंटैक्स v-slot:[expr] या #[expr] का उपयोग करते हैं कि props या स्थिति के आधार पर कौन-सा स्लॉट भरा जाए। इससे विन्यास योग्य रैपर, टैब प्रणालियाँ और डेटा-आधारित कॉलम रेंडर करना संभव होता है।

शुरुआत निःशुल्क

एआई शिक्षक के साथ HTML सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 42
पाठ: 156

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “Dynamic Slot Names” पाठ निःशुल्क है?

हाँ — Vue Academy अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “Dynamic Slot Names” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। Vue Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“Dynamic Slot Names” में मैं क्या सीखूँगा?

v-slot:[dynamicName], programmatic slot selection और conditional slot rendering। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Vue Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या Vue Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Vue Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 3वाँ पाठ है।

“Dynamic Slot Names” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस Vue Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर Vue Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

← Vue Academy पर वापस जाएँ