Vue Academy · पाठ

जेनेरिक Vue कंपोनेंट

जेनेरिक के साथ defineComponent, जेनेरिक script setup और टाइप किए हुए स्लॉट props

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

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

जेनेरिक घटक

कुछ घटक किसी भी डेटा प्रकार के साथ काम करते हैं — जैसे प्रकार-निर्धारित सूची, चयन-सूची या तालिका। Vue 3.3 आपको जेनेरिक घटक लिखने देता है, ताकि उपयोग करने वाले को any पर निर्भर होने के बजाय पूरा प्रकार-अनुमान मिलता रहे।

जेनेरिक विशेषता

<script setup> में generic विशेषता जोड़ें। यह पूरी स्क्रिप्ट में उपलब्ध प्रकार पैरामीटर घोषित करती है, ठीक जेनेरिक फ़ंक्शन की तरह।

<script setup lang="ts" generic="T">
// T can now be used below
</script>

जेनेरिक Props

defineProps में प्रकार पैरामीटर का उपयोग करें। यहाँ घटक किसी भी प्रकार T का ऐरे स्वीकार करता है।

<script setup lang="ts" generic="T">
defineProps<{
  items: T[]
  selected: T
}>()
</script>

कॉल स्थल पर प्रकार-अनुमान

जब पैरेंट items भेजता है, तब TypeScript डेटा से T का अनुमान लगा लेता है — स्पष्ट प्रकार की आवश्यकता नहीं होती। संख्याएँ भेजने पर selected संख्या होना चाहिए।

<MyList :items="[1, 2, 3]" :selected="2" />
<!-- T inferred as number -->

प्रकार पर प्रतिबंध लगाना

किसी निश्चित संरचना की आवश्यकता के लिए extends जोड़ें। यहाँ T में id होना आवश्यक है, जो कुंजी वाली सूचियों के लिए उपयोगी है।

<script setup lang="ts" generic="T extends { id: number }">
defineProps<{ items: T[] }>()
</script>

एकाधिक प्रकार पैरामीटर

जेनेरिक फ़ंक्शन सिग्नेचर की तरह, कई पैरामीटरों को अल्पविराम से अलग करके घोषित करें।

<script setup lang="ts" generic="T, K extends keyof T">
defineProps<{
  items: T[]
  field: K
}>()
</script>

प्रकार-निर्धारित स्लॉट Props

जेनेरिक को प्रकार-निर्धारित स्लॉट के साथ मिलाएँ, ताकि स्लॉट की सामग्री का प्रकार भी निर्धारित हो। स्लॉट सिग्नेचर को defineSlots के साथ घोषित करें।

<script setup lang="ts" generic="T">
defineProps<{ items: T[] }>()
defineSlots<{
  default(props: { item: T }): any
}>()
</script>

जेनेरिक स्लॉट को रेंडर करना

टेम्पलेट में प्रत्येक आइटम को स्लॉट में भेजें। पैरेंट को सही प्रकार वाले स्लॉट props मिलते हैं।

<template>
  <ul>
    <li v-for="item in items" :key="String(item)">
      <slot :item="item" />
    </li>
  </ul>
</template>

प्रकार-अनुमान के साथ उपयोग करना

पैरेंट को स्लॉट के दायरे में स्वतः प्रकार-निर्धारित item मिलता है — यह उसके द्वारा भेजे गए ऐरे पर आधारित होता है।

<MyList :items="users">
  <template #default="{ item }">
    {{ item.name }}
  </template>
</MyList>

जेनेरिक Emits

प्रकार पैरामीटर defineEmits में भी प्रवाहित होते हैं, इसलिए इवेंट पेलोड में जेनेरिक प्रकार ले जाया जा सकता है।

<script setup lang="ts" generic="T">
defineProps<{ items: T[] }>()
const emit = defineEmits<{
  select: [item: T]
}>()
</script>

जेनेरिक का उपयोग कब करें

जब कोई घटक वास्तव में प्रकार-निरपेक्ष हो और आप चाहते हों कि प्रकार-अनुमान उसके माध्यम से प्रवाहित हो — जैसे सूचियाँ, तालिकाएँ और स्वतः-पूर्ण चयन। स्थिर डेटा संरचनाओं के लिए सामान्य प्रकार-निर्धारित घटक सरल होता है।

त्वरित जाँच

जेनेरिक घटकों के अपने ज्ञान का परीक्षण करें।

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

पुनरावलोकन

आपने जेनेरिक घटक सीखे:

script setup पर generic विशेषता के साथ प्रकार पैरामीटर घोषित करें।
items: T[] जैसे प्रकार-निरपेक्ष डेटा के लिए उनका उपयोग defineProps में करें।
extends के साथ प्रतिबंध लगाएँ और कई पैरामीटर जोड़ें।
defineSlots के साथ स्लॉट props का प्रकार निर्धारित करें, ताकि उपयोग करने वालों को पूरा प्रकार-अनुमान मिल सके।

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

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

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

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

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

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

क्या “जेनेरिक Vue कंपोनेंट” पाठ निःशुल्क है?

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

“जेनेरिक Vue कंपोनेंट” में मैं क्या सीखूँगा?

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

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

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

“जेनेरिक Vue कंपोनेंट” पाठ पूरा करने में कितना समय लगता है?

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

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

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

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

Vue प्रोजेक्ट में TypeScript सेटअप
defineProps/defineEmits के साथ टाइप किए गए Props और Emits
कंपोज़ेबल और Refs की टाइपिंग
जेनेरिक Vue कंपोनेंट

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