Props
Vue.js (व्यू जेएस) में Props एक महत्वपूर्ण तंत्र है जो पेरेंट (अभिभावक) कंपोनेंट से चाइल्ड (संतान) कंपोनेंट में डेटा पास करने की अनुमति देता है। यह डेटा का एक-तरफा प्रवाह सुनिश्चित करता है, जिससे कंपोनेंट्स मॉड्यूलर, पुन: प्रयोज्य और मेंटेन करने योग्य बनते हैं। Props का उपयोग तब किया जाता है जब हमें चाइल्ड कंपोनेंट को डायनामिक डेटा प्रदान करना होता है और कंपोनेंट्स को loosely coupled रखना होता है।
Vue.js (व्यू जेएस) में Props का उपयोग करते समय मुख्य अवधारणाएँ जैसे कि सिंटैक्स, डेटा स्ट्रक्चर, एल्गोरिदम और ऑब्जेक्ट-ओरिएंटेड प्रिंसिपल्स लागू होते हैं। डेवलपर्स सीखेंगे कि Props को टाइप के साथ कैसे परिभाषित किया जाए, वैलिडेशन कैसे करें, डिफ़ॉल्ट वैल्यू कैसे सेट करें, और जटिल कंपोनेंट हायरार्की में इनका उपयोग कैसे करें। साथ ही, यह ट्यूटोरियल आम गलतियों जैसे कि Props को डायरेक्टली म्यूट करना, मेमोरी लीक, और इफीशिएंट एल्गोरिदम का अभाव को भी कवर करता है। Props की समझ सॉफ्टवेयर डेवलपमेंट और सिस्टम आर्किटेक्चर के व्यापक संदर्भ में डेवलपर्स को स्केलेबल और परफॉर्मेंट Vue.js (व्यू जेएस) एप्लिकेशन बनाने में सक्षम बनाती है।
मूल उदाहरण <template>
text<div>
<h1>पेरेंट कंपोनेंट</h1>
<ChildComponent :title="parentTitle" :counter="parentCounter" />
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
name: 'ParentComponent',
components: { ChildComponent },
data() {
return {
parentTitle: 'Vue.js Props उदाहरण',
parentCounter: 10
}
}
}
</script>
<!-- ChildComponent.vue -->
<template>
<div>
<h2>{{ title }}</h2>
<p>काउंटर: {{ counter }}</p>
</div>
</template>
<script>
export default {
name: 'ChildComponent',
props: {
title: {
type: String,
required: true
},
counter: {
type: Number,
default: 0
}
}
}
</script>इस उदाहरण में, पेरेंट कंपोनेंट दो Props – title और counter – चाइल्ड कंपोनेंट को पास करता है। सिंटैक्स :title="parentTitle" और :counter="parentCounter" पेरेंट के डेटा को चाइल्ड Props से जोड़ता है। ChildComponent में props ऑप्शन Props को टाइप और डिफ़ॉल्ट वैल्यू के साथ डिफ़ाइन करता है। टाइप वैलिडेशन सुनिश्चित करता है कि title स्ट्रिंग और counter नंबर है। डिफ़ॉल्ट वैल्यू चाइल्ड कंपोनेंट को बिना पेरेंट डेटा के भी कार्यशील बनाती है। यह उदाहरण Vue.js (व्यू जेएस) की रिएक्टिविटी भी दिखाता है: पेरेंट डेटा में बदलाव चाइल्ड को ऑटोमैटिकली अपडेट करता है। एडवांस्ड डेवलपमेंट में Props को कंप्यूटेड प्रॉपर्टीज़ और मेथड्स के साथ मिलाकर परफॉर्मेंट और सुरक्षित डेटा प्रोसेसिंग की जा सकती है। डायरेक्ट म्यूटेशन से बचना चाहिए ताकि डेटा फ्लो एकतरफा और predictable रहे।
व्यावहारिक उदाहरण <template>
text<div>
<h1>एडवांस्ड चाइल्ड कंपोनेंट</h1>
<p>आर्टिकल: {{ article.name }}</p>
<p>मात्रा: {{ quantity }}</p>
<p>कुल कीमत: {{ totalPrice }}</p>
<button @click="increaseQuantity">मात्रा बढ़ाएं</button>
</div>
</template>
<script>
export default {
name: 'AdvancedChild',
props: {
article: {
type: Object,
required: true,
validator: (obj) => 'name' in obj && 'price' in obj
},
quantity: {
type: Number,
default: 1
}
},
computed: {
totalPrice() {
return this.article.price * this.quantity
}
},
methods: {
increaseQuantity() {
this.$emit('update:quantity', this.quantity + 1)
}
}
}
</script>
<!-- Parent Usage -->
<AdvancedChild :article="{ name: 'Laptop', price: 1200 }" :quantity="2" @update:quantity="newQty => quantity = newQty" />📊 संदर्भ तालिका
| Vue.js (व्यू जेएस) Element/Concept | Description | Usage Example |
|---|---|---|
| props | चाइल्ड कंपोनेंट्स के लिए custom attributes डिफ़ाइन करता है | props: { title: String, counter: Number } |
| :prop | पेरेंट डेटा को चाइल्ड Props से bind करता है | <ChildComponent :title="parentTitle" /> |
| default values | Fallback value अगर पेरेंट डेटा ना दे | props: { quantity: { type: Number, default: 1 } } |
| computed with props | Props से derived reactive data | computed: { total: () => this.price * this.quantity } |
| custom validator | Object structure या content validate करता है | props: { article: { validator: obj => 'name' in obj } } |
🧠 अपने ज्ञान की परीक्षा करें
अपने ज्ञान की परीक्षा करें
इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं
📝 निर्देश
- हर प्रश्न को ध्यान से पढ़ें
- हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
- आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
- आपकी प्रगति शीर्ष पर दिखाई जाएगी