Vue Academy · पाठ

Props और CustomEvent

props से डेटा नीचे भेजिए और पैरेंट तक इवेंट ऊपर भेजने के लिए emit कीजिए

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

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

पैरेंट-चाइल्ड संचार

घटक दो दिशाओं में संवाद करते हैं:

Props पैरेंट से चाइल्ड तक डेटा भेजते हैं
Events चाइल्ड से पैरेंट तक संदेश भेजते हैं

डेटा का यह एकतरफ़ा प्रवाह app को अनुमानित व्यवहार वाला बनाए रखता है।

Props घोषित करना

चाइल्ड अपने द्वारा स्वीकार किए जाने वाले props घोषित करता है। script setup में defineProps का उपयोग करें।

<script setup>
const props = defineProps(['title', 'count'])
</script>

<template>
  <h2>{{ title }}</h2>
  <p>{{ count }}</p>
</template>

प्रॉप्स के साथ प्रकार

सत्यापन के लिए प्रकार निर्दिष्ट करने हेतु props को ऑब्जेक्ट के रूप में घोषित करें।

<script setup>
defineProps({
  title: String,
  count: Number,
  isActive: Boolean
})
</script>

डिफ़ॉल्ट और आवश्यक Props

आप props को आवश्यक चिह्नित कर सकते हैं और डिफ़ॉल्ट मान दे सकते हैं।

<script setup>
defineProps({
  title: {
    type: String,
    required: true
  },
  count: {
    type: Number,
    default: 0
  }
})
</script>

पैरेंट से Props पास करना

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

<template>
  <ProductCard
    title="Coffee Mug"
    :count="stock"
    :is-active="available"
  />
</template>

<!-- static string vs bound expression -->

Prop नामकरण परंपरा

JS में props को camelCase में घोषित करें और टेम्पलेट में उन्हें kebab-case में पास करें।

JS prop: isActive
टेम्पलेट एट्रिब्यूट: :is-active

Vue दोनों रूपों के बीच अपने-आप रूपांतरण करता है।

Props केवल पढ़ने योग्य होते हैं

चाइल्ड को अपने props को सीधे नहीं बदलना चाहिए।

Props केवल एक दिशा में, नीचे की ओर प्रवाहित होते हैं
उन्हें बदलने से अनुमानित व्यवहार बिगड़ता है और चेतावनियाँ आती हैं
साझा डेटा बदलने के लिए ऐसा इवेंट भेजें जिससे पैरेंट उसे अपडेट कर सके

भेजे जाने वाले इवेंट घोषित करना

चाइल्ड अपने द्वारा भेजे जाने वाले इवेंट को defineEmits से घोषित करता है।

<script setup>
const emit = defineEmits(['increment', 'delete'])
</script>

इवेंट भेजना

इवेंट को ऊपर भेजने के लिए emit फ़ंक्शन को कॉल करें; इसके साथ वैकल्पिक रूप से पेलोड भी भेज सकते हैं।

<script setup>
const emit = defineEmits(['add'])

function handleClick() {
  emit("add", { id: 1, name: "Item" })
}
</script>

<template>
  <button @click="handleClick">Add</button>
</template>

विकल्प एपीआई में इवेंट भेजना

विकल्प एपीआई में इसके बजाय this.$emit को कॉल करें।

export default {
  emits: ["save"],
  methods: {
    onSave() {
      this.$emit("save", this.formData)
    }
  }
}

पैरेंट का इवेंट सुनना

पैरेंट @event-name से सुनता है और पेलोड प्राप्त करता है।

<template>
  <TodoItem
    :task="task"
    @delete="removeTask"
    @add="onAdd"
  />
</template>

<script setup>
function onAdd(item) {
  console.log("Added:", item.name)
}
</script>

त्वरित जाँच

props और इवेंट की अपनी समझ जाँचें।

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

पुनरावलोकन: Props और इवेंट

आपने घटकों के संचार के बारे में सीखा:

defineProps प्रकारों और डिफ़ॉल्ट मानों के साथ props घोषित करता है
Props नीचे की ओर प्रवाहित होते हैं और केवल पढ़ने योग्य होते हैं
defineEmits इवेंट घोषित करता है
emit("name", payload) इवेंट को ऊपर भेजता है
पैरेंट @event से सुनता है

अगला विषय: स्लॉट और सीमित-दायरे वाले स्लॉट।

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

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

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

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

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

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

क्या “Props और CustomEvent” पाठ निःशुल्क है?

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

“Props और CustomEvent” में मैं क्या सीखूँगा?

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

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

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

“Props और CustomEvent” पाठ पूरा करने में कितना समय लगता है?

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

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

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

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

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