Vue के प्रोप आपको एक घटक पर कस्टम विशेषताओं को पंजीकृत करने की अनुमति देते हैं। पता करें कि उनका उपयोग कैसे करना है।
Vue की प्रमुख विशेषताओं में से एक इसका मॉड्यूलर आर्किटेक्चर है, जो आपको छोटे, पुन: प्रयोज्य घटकों को मिलाकर वेब ऐप बनाने में सक्षम बनाता है। इससे आप अपने वेब ऐप को आसानी से अपडेट और रख-रखाव कर सकते हैं।
Vue में प्रत्येक घटक के पास डेटा और विधियों का अपना सेट हो सकता है, जिसे आप प्रॉपर के साथ उसके चाइल्ड कंपोनेंट्स को पास कर सकते हैं। यहां, आप सीखेंगे कि पैरेंट से चाइल्ड कंपोनेंट्स को डेटा पास करने के लिए Vue में प्रॉप्स का उपयोग कैसे करें।
Vue में प्रॉप्स क्या हैं?
प्रॉप्स - "प्रॉपर्टीज" के लिए छोटा - Vue में कस्टम एट्रिब्यूट्स हैं जो एक पैरेंट कंपोनेंट अपने चाइल्ड कंपोनेंट्स को पास कर सकता है।
Vue में, पैरेंट कंपोनेंट्स एक यूनिडायरेक्शनल फ्लो में चाइल्ड कंपोनेंट्स को प्रॉप्स पास करते हैं। इसका मतलब यह है कि चाइल्ड कंपोनेंट्स केवल इन पारित प्रॉप्स को पढ़ और उपयोग कर सकते हैं लेकिन डेटा को संशोधित नहीं कर सकते हैं।
प्रॉप्स का उपयोग करने से आप पुन: प्रयोज्य घटक बना सकते हैं जिन्हें आप अपने पूरे एप्लिकेशन में लागू कर सकते हैं। प्रॉप्स आपके समय और प्रयास को बचाते हैं, क्योंकि आप स्क्रैच से नए घटक बनाने के बजाय घटकों का पुन: उपयोग कर सकते हैं।
Vue में प्रॉप्स कैसे पास करें
Vue में प्रॉप्स पास करना आसान है और आपके पास करने के तरीके से अलग है प्रतिक्रिया में सहारा. Vue में पैरेंट कंपोनेंट से उसके चाइल्ड कंपोनेंट में प्रॉप पास करने के लिए, चाइल्ड कंपोनेंट की स्क्रिप्ट में प्रॉप्स विकल्प का उपयोग करें।
यहाँ एक उदाहरण है:
बाल घटक
<खाका>
<डिव>
<एच 1>{{ शीर्षक }}एच 1>
<पी>{{ संदेश }}पी>
<पी>{{ मेल पता }}पी>
डिव>
खाका>
<लिखी हुई कहानी>
निर्यात डिफ़ॉल्ट {
नाम: "चाइल्डकंपोनेंट",
सहारा: ["शीर्षक", "संदेश", "ईमेल पता"],
};
लिखी हुई कहानी>
उपरोक्त कोड ब्लॉक माता-पिता घटक से डेटा पास करने के लिए प्रोप का उपयोग करके एक वीयू चाइल्ड घटक का वर्णन करता है। घटक में तीन HTML तत्व शामिल हैं जो प्रदर्शित करते हैं शीर्षक, संदेश, और मेल पता प्रक्षेप के साथ गुण।
रंगमंच की सामग्री चाइल्ड कंपोनेंट में विकल्प गुणों की एक सरणी लेता है। यह सरणी उन गुणों को परिभाषित करती है जो बाल घटक मूल घटक से स्वीकार करता है।
यहां वीयू पैरेंट कंपोनेंट के साथ चाइल्ड कंपोनेंट को डेटा पास करने का उदाहरण दिया गया है रंगमंच की सामग्री:
जनक घटक
<खाका>
<डिव>
<बाल-घटक
शीर्षक = "हैलो वर्ल्ड"
संदेश = "यह मूल घटक से एक संदेश है"
ईमेल पता = "[email protected]"
/>
डिव>
खाका><लिखी हुई कहानी>
"./components/ChildComponent.vue" से चाइल्डकंपोनेंट आयात करें;
निर्यात डिफ़ॉल्ट {
नाम: "पेरेंटकंपोनेंट",
अवयव: {
चाइल्डकंपोनेंट,
},
};
लिखी हुई कहानी>
उपरोक्त कोड ब्लॉक में पैरेंट कंपोनेंट चाइल्ड कंपोनेंट को तीन प्रॉप्स पास करता है। कोड ब्लॉक स्थिर मानों को पास करता है शीर्षक, संदेश, और मेल पता सहारा।
आप अपने प्रॉप्स के साथ डायनेमिक वैल्यू भी पास कर सकते हैं वि बाँध निर्देश। वि बाँध एक निर्देश है डेटा को बाइंड करने के लिए Vue में उपयोग किया जाता है HTML विशेषताओं के लिए।
यहाँ Vue मूल घटक का उपयोग करने का एक उदाहरण दिया गया है वि बाँध प्रॉप्स को डायनेमिक वैल्यू पास करने का निर्देश:
जनक घटक
<खाका>
<डिव>
<बाल-घटक
: शीर्षक = "शीर्षक"
: संदेश = "संदेश"
: ईमेल पता = "ईमेल पता"
/>
डिव>
खाका><लिखी हुई कहानी>
"./components/ChildComponent.vue" से चाइल्डकंपोनेंट आयात करें;
निर्यात डिफ़ॉल्ट {
नाम: "पेरेंटकंपोनेंट",
अवयव: {
चाइल्डकंपोनेंट,
},
आंकड़े() {
वापस करना {
शीर्षक: "स्वागत है प्रिय",
संदेश: "आप कैसे हैं",
ईमेल पता: "[email protected]",
};
},
};
लिखी हुई कहानी>
का उपयोग वि बाँध चाइल्ड कंपोनेंट को डेटा पास करने का निर्देश, आप पैरेंट कंपोनेंट की स्थिति के आधार पर प्रोप के मूल्यों को अपडेट कर सकते हैं। उदाहरण के लिए, को बदलकर शीर्षक मूल घटक में डेटा गुण, the शीर्षक चाइल्ड कंपोनेंट को पास किया गया प्रोप भी अपडेट किया जाएगा।
प्रॉप्स को स्ट्रिंग्स की एक सरणी के रूप में परिभाषित करने की यह विधि एक शॉर्टहैंड पैटर्न है। सरणी में प्रत्येक तार एक प्रोप का प्रतिनिधित्व करता है। यह विधि तब आदर्श होती है जब सरणी में सभी प्रॉप्स समान होते हैं जावास्क्रिप्ट डेटा प्रकार.
Vue में प्रॉप्स को ऑब्जेक्ट के रूप में परिभाषित करना
प्रोप को सरणी के बजाय जावास्क्रिप्ट ऑब्जेक्ट के रूप में परिभाषित करना प्रत्येक प्रोप के बेहतर अनुकूलन की अनुमति देता है। एक घटक में एक वस्तु के रूप में प्रोप को परिभाषित करने से आप प्रत्येक प्रोप के अपेक्षित डेटा प्रकार और डिफ़ॉल्ट मान को निर्दिष्ट करने में सक्षम होंगे।
इसके अतिरिक्त, आप विशिष्ट प्रोप को आवश्यकतानुसार चिह्नित कर सकते हैं, यदि कंपोनेंट उपयोग में होने पर प्रोप प्रदान नहीं किया जाता है तो चेतावनी ट्रिगर कर सकते हैं। प्रॉप्स को एक वस्तु के रूप में परिभाषित करने से प्रॉप्स को एक सरणी के रूप में परिभाषित करने के कई फायदे मिलते हैं, जिनमें शामिल हैं:
- अपेक्षित डेटा प्रकार और प्रत्येक प्रोप के लिए डिफ़ॉल्ट मान को परिभाषित करना आपके और आपकी डेवलपर टीम के लिए यह समझना आसान बनाता है कि घटक का उपयोग कैसे किया जाए।
- प्रॉप्स को आवश्यकता के अनुसार चिह्नित करके, आप विकास प्रक्रिया की शुरुआत में ही त्रुटियों को पकड़ सकते हैं और डेवलपर टीम को अधिक जानकारी प्रदान कर सकते हैं।
Vue.js कॉम्पोनेंट में प्रॉप्स को एक ऑब्जेक्ट के रूप में परिभाषित करने का एक उदाहरण यहां दिया गया है:
<खाका>
<डिव>
<एच 1>{{ शीर्षक }}एच 1>
<पी>{{ संदेश }}पी>
<पी>{{ मेल पता }}पी>
डिव>
खाका>
<लिखी हुई कहानी>
निर्यात डिफ़ॉल्ट {
नाम: "चाइल्डकंपोनेंट",
सहारा: {
शीर्षक: {
टाइप करें: स्ट्रिंग,
डिफ़ॉल्ट: "डिफ़ॉल्ट शीर्षक",
},
संदेश: {
टाइप करें: स्ट्रिंग,
डिफ़ॉल्ट: "डिफ़ॉल्ट संदेश",
},
मेल पता: {
टाइप करें: स्ट्रिंग,
आवश्यक: सत्य,
},
},
};
लिखी हुई कहानी>
यह कोड ब्लॉक Vue.js कॉम्पोनेंट का एक उदाहरण है, जो पेरेंट कंपोनेंट से चाइल्ड कंपोनेंट तक डेटा पास करने के लिए प्रॉप्स का उपयोग करता है। कोड ब्लॉक इन प्रॉप्स को एक प्रकार और डिफ़ॉल्ट मान या एक आवश्यक ध्वज के साथ ऑब्जेक्ट के रूप में परिभाषित करता है।
कोड ब्लॉक परिभाषित करता है शीर्षक और संदेश a के साथ तार के रूप में सहारा गलती करना मूल्य और मेल पता एक के रूप में सहारा आवश्यक डोरी।
सबसे अच्छा तरीका चुनें जो आपके Vue ऐप के अनुकूल हो
आपने सीखा है कि कैसे प्रॉप्स को एक ऐरे और ऑब्जेक्ट दोनों के रूप में परिभाषित किया जाता है। आपकी वरीयता आपके ऐप की विशिष्ट आवश्यकताओं के अनुरूप होनी चाहिए।
Vue खुद को एक बहुत ही लचीले जावास्क्रिप्ट फ्रेमवर्क के रूप में साबित करता है। यह आपके द्वारा काम करने के लिए चुने गए किसी भी विकल्प या विधियों के लिए अलग-अलग लाभों के साथ एक ही लक्ष्य को प्राप्त करने के लिए बहुत सारे तरीके और विकल्प प्रदान करता है।