Vue Academy · पाठ

स्लॉट और स्कोप्ड स्लॉट

स्लॉट और स्कोप्ड स्लॉट का उपयोग करके लचीले कंपोनेंट संयोजित कीजिए

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

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

स्लॉट क्या होते हैं?

स्लॉट पैरेंट को चाइल्ड component के टेम्पलेट में सामग्री डालने देते हैं।

Props डेटा पास करते हैं; स्लॉट मार्कअप पास करते हैं
लेआउट रैपर, कार्ड और मोडल के लिए बहुत उपयोगी
सामग्री कहाँ जाएगी, यह चाइल्ड तय करता है

डिफ़ॉल्ट स्लॉट

चाइल्ड slot एलिमेंट से एक प्लेसहोल्डर परिभाषित करता है। पैरेंट टैग के बीच जो भी रखता है, वह उसे भर देता है।

<!-- Card.vue (child) -->
<template>
  <div class="card">
    <slot></slot>
  </div>
</template>

डिफ़ॉल्ट स्लॉट का उपयोग करना

पैरेंट घटक के टैग के बीच सामग्री पास करता है।

<!-- Parent -->
<Card>
  <h2>Title</h2>
  <p>Any content goes here.</p>
</Card>

<!-- It renders inside the card div -->

वैकल्पिक स्लॉट सामग्री

जब पैरेंट कुछ भी पास नहीं करता, तब दिखाई जाने वाली वैकल्पिक सामग्री स्लॉट में दी जा सकती है।

<!-- Button.vue -->
<template>
  <button>
    <slot>Click me</slot>
  </button>
</template>

<!-- <Button /> shows "Click me";
     <Button>Save</Button> shows "Save" -->

कई नामित स्लॉट

नामित स्लॉट किसी component को कई सामग्री-प्रवेश बिंदु उपलब्ध कराने देते हैं।

<!-- Layout.vue -->
<template>
  <header><slot name="header"></slot></header>
  <main><slot></slot></main>
  <footer><slot name="footer"></slot></footer>
</template>

नामित स्लॉट भरना

पैरेंट टेम्पलेट टैग पर v-slot:name के साथ किसी नामित स्लॉट को चुनता है।

<Layout>
  <template v-slot:header>
    <h1>Site Title</h1>
  </template>

  <p>Main content (default slot)</p>

  <template v-slot:footer>
    <small>Copyright 2024</small>
  </template>
</Layout>

v-slot का संक्षिप्त रूप

v-slot का एक संक्षिप्त रूप है: # चिह्न।

<Layout>
  <template #header>
    <h1>Title</h1>
  </template>

  <template #footer>
    <small>Footer</small>
  </template>
</Layout>

सीमित-दायरे वाले स्लॉट

सीमित-दायरे वाले स्लॉट चाइल्ड को स्लॉट की सामग्री तक डेटा भेजने देते हैं।

चाइल्ड स्लॉट एलिमेंट पर डेटा बाइंड करता है
पैरेंट उसे slot props के रूप में प्राप्त करता है
जब चाइल्ड डेटा नियंत्रित करता है, लेकिन पैरेंट उसका रूप नियंत्रित करता है, तब यह उपयोगी होता है

चाइल्ड से डेटा उपलब्ध कराना

चाइल्ड डेटा साझा करने के लिए स्लॉट पर एट्रिब्यूट बाइंड करता है।

<!-- UserList.vue -->
<template>
  <li v-for="user in users" :key="user.id">
    <slot :user="user"></slot>
  </li>
</template>

सीमित-दायरे वाले स्लॉट का डेटा लेना

पैरेंट v-slot के माध्यम से डेटा प्राप्त करता है।

<UserList>
  <template #default="slotProps">
    {{ slotProps.user.name }}
  </template>
</UserList>

<!-- or destructure: #default="{ user }" -->

किस स्लॉट का उपयोग कब करें

त्वरित मार्गदर्शिका:

डिफ़ॉल्ट स्लॉट सरल सामग्री डालने के लिए
नामित स्लॉट कई क्षेत्रों (लेआउट) के लिए
सीमित-दायरे वाले स्लॉट तब, जब पैरेंट को चाइल्ड के आंतरिक डेटा की आवश्यकता हो

त्वरित जाँच

स्लॉट की अपनी समझ जाँचें।

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

पुनरावलोकन: स्लॉट

आपने स्लॉट से सामग्री वितरित करना सीखा:

डिफ़ॉल्ट स्लॉट पैरेंट से मार्कअप डालता है
जब कुछ भी पास नहीं किया जाता, तब वैकल्पिक सामग्री दिखाई देती है
नामित स्लॉट (v-slot:name, संक्षिप्त रूप #) क्षेत्रों को चुनते हैं
सीमित-दायरे वाले स्लॉट चाइल्ड का डेटा स्लॉट की सामग्री तक भेजते हैं

अगला विषय: प्रतिक्रियाशीलता की मूल बातें।

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

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

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

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

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

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

क्या “स्लॉट और स्कोप्ड स्लॉट” पाठ निःशुल्क है?

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

“स्लॉट और स्कोप्ड स्लॉट” में मैं क्या सीखूँगा?

स्लॉट और स्कोप्ड स्लॉट का उपयोग करके लचीले कंपोनेंट संयोजित कीजिए आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Vue Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

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

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

“स्लॉट और स्कोप्ड स्लॉट” पाठ पूरा करने में कितना समय लगता है?

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

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

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

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

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