Vue घटकों का परिचय

परिचय

एक बड़े एप्लिकेशन को विकसित करते समय, कोड को पढ़ने, संरचना करने और बनाए रखने में आसान बनाने के लिए इसे छोटे घटकों में तोड़ना हमेशा एक अच्छा विचार होता है। अधिकांश Vue शुरुआती समझते हैं कि कम से कम वैचारिक रूप से कौन से घटक हैं, लेकिन वे यह नहीं समझ सकते हैं कि वे क्या कर सकते हैं और क्या नहीं।

इस गाइड में, हम देखेंगे कि Vue में एक घटक क्या है, यह कैसे काम करता है, डेटा और घटनाओं को उनके माध्यम से कैसे पास किया जाए और बहुत कुछ।

एक वू घटक क्या है?

अवयव Vue तत्वों के पुन: प्रयोज्य उदाहरण हैं जिनमें टेम्पलेट्स, शैलियों और जावास्क्रिप्ट तत्व शामिल हैं। प्रत्येक घटक "अपनी खुद की चीज़" है, इसी तरह प्रत्येक HTML तत्व "अपनी चीज़" है, और Vue घटक और HTML तत्व दोनों हमें वेब पेजों के लिए बिल्डिंग ब्लॉक्स के रूप में उपयोग करने की अनुमति देते हैं।

आप Vue घटकों को JavaScript-imbued HTML तत्वों के रूप में सोच सकते हैं, जिन्हें आप स्वयं परिभाषित और हेरफेर कर सकते हैं।

एक विशिष्ट Vue एप्लिकेशन कई घटकों से बना होता है जिन्हें आवश्यकतानुसार कई बार पुन: उपयोग किया जा सकता है।

उदाहरण के लिए, एक सामान्य वेबसाइट में ऐसे सेक्शन होते हैं जो सभी पेजों पर दिखाई देते हैं - नेवबार, हेडर, फुटर, इत्यादि। इसलिए, उनमें से प्रत्येक को एक अलग घटक बनाना एक अच्छा अभ्यास माना जाता है। इस तरह, हम अच्छी तरह से संरचित, पठनीय, पुन: प्रयोज्य और आसानी से बनाए रखने योग्य कोड बना रहे हैं:

कैसे एक Vue घटक बनाने के लिए

Vue कंपोनेंट बनाने के दो बुनियादी तरीके हैं, यह इस बात पर निर्भर करता है कि हमारा प्रोजेक्ट कैसे बनाया गया था - बिल्ड सेटअप के साथ या उसके बिना. पहले मामले में, प्रत्येक घटक को एक अलग फ़ाइल में संग्रहीत किया जाता है। दूसरे मामले में, एक फ़ाइल में कई घटक हो सकते हैं।

बिल्ड सेटअप के साथ Vue कंपोनेंट्स बनाएं

अधिकांश प्रोजेक्ट का उपयोग करके बनाए जाते हैं निर्माण सेटअप, जो हमें सिंगल-फाइल कंपोनेंट्स बनाने में सक्षम बनाता है (एसएफसी) - समर्पित घटक फ़ाइलें .vue विस्तार। यह हमें एक फ़ाइल में एक Vue घटक के टेम्पलेट, तर्क और स्टाइल को समाहित करने की अनुमति देता है:

<!-- Vue-specific JavaScript -->
<script> export default { data() { return { title: 'Hello World!' } } }
</script> <!-- HTML Template -->
<template> <div> <p class="title">{{ title }}</p> </div>
</template> <!-- CSS Styling -->
<style>
.title { color: red;
}
</style>

बिल्ड सेटअप के बिना Vue कंपोनेंट्स बनाएं

यदि आप, किसी भी कारण से, पैकेज प्रबंधक का उपयोग नहीं कर सकते जैसे कि npm अपनी मशीन पर Vue इंस्टॉल करने के लिए, आप अभी भी अपने ऐप में Vue का उपयोग कर सकते हैं। Vue का उपयोग करके बिल्डिंग का एक विकल्प npm a के माध्यम से Vue को स्थापित करना है CDN (सामग्री वितरण नेटवर्क) सीधे आपके ऐप में। आइए जल्दी से Vue कंपोनेंट बनाने के इस तरीके को देखें।

बिल्ड के बिना Vue को इंस्टॉल करने से हम Vue-विशिष्ट कार्यात्मकताओं का उपयोग करने में सक्षम होंगे, जैसा कि हम सादे JavaScript के साथ करते हैं। सिंटैक्स कुछ हद तक वैसा ही है जैसा हमने सामान्य SFC में देखा है:

export default { data() { return { title: 'Hello World!' } }, template: ` <div> <p class="title">{{ title }}</p>. </div>`
}

इस गाइड में, हम इसका उपयोग करेंगे एसएफसी सिंटैक्स, क्योंकि घटकों को बनाने का यह सबसे अधिक इस्तेमाल किया जाने वाला तरीका है।

Vue

अब तक, हमने देखा है कि Vue में कंपोनेंट्स कैसे बनाए जाते हैं। अगला कदम इन घटकों को दूसरे घटक के भीतर उपयोग करना होगा (अभिभावक-बाल पदानुक्रम).

ऐसा करने के लिए, हमें पहले उन घटकों को पंजीकृत करना होगा जिनका हम उपयोग करना चाहते हैं। इस पंजीकरण में घटकों का आयात और फिर पंजीकरण शामिल है। ऐसा करने के लिए दो विकल्प हैं- वैश्विक और स्थानीय पंजीकरण.

Vue घटक - वैश्विक पंजीकरण

वैश्विक रूप से पंजीकृत घटक, जैसा कि नाम से पता चलता है, विश्व स्तर पर उपलब्ध हैं, जिसका अर्थ है कि हमारे आवेदन के किसी भी घटक में उनका उपयोग किया जा सकता है, हमें उन्हें फिर से आयात किए बिना। यह का उपयोग करके एक घटक को पंजीकृत करके पूरा किया जाता है app.component() तरीका:

import ChildComponent from './App.vue' app.component('ChildComponent', ChildComponent)

ऐसी स्थिति में जहां हमारे पास कई घटक हों, हम कर सकते हैं श्रृंखला उन्हें इस तरह:

app .component('ChildComponent', ChildComponent) .component('ProfileComponent', ProfileComponent)

हमारे घटकों को पंजीकृत करने के बाद, हम निम्नलिखित सिंटैक्स का उपयोग करके इस एप्लिकेशन के भीतर किसी भी घटक के टेम्पलेट में उनका उपयोग कर सकते हैं:

<ChildComponent/>
<ProfileComponent/>

Vue घटक - स्थानीय पंजीकरण

हम ज्यादातर मामलों में स्थानीय पंजीकरण का उपयोग करेंगे क्योंकि यह हमें हमारे पंजीकृत घटकों की उपलब्धता की गुंजाइश की अनुमति देता है। इन घटकों को आयात करना और फिर उन्हें इसमें जोड़ना components विकल्प इसे पूरा करता है:

<script>
import ChildComponent from './ChildComponent.vue' export default { components: { ChildComponent }
}
</script> <template> <ChildComponent />
</template>

घटकों का नामकरण करते समय, उपयोग करें टेढ़े मेढ़े संयुक्त शब्द यह स्पष्ट करने के लिए कि यह टेम्प्लेट में मूल HTML तत्व के बजाय एक Vue घटक है। यह जावास्क्रिप्ट में घटकों को आयात और पंजीकृत करना भी आसान बनाता है।

कैसे Vue घटकों के माध्यम से डेटा पास करने के लिए

घटकों को बनाने के लाभों में से एक कोड को मॉड्यूलर बनाकर पुन: उपयोग करने की क्षमता है।

मान लें कि हम एक उपयोगकर्ता का प्रोफ़ाइल घटक बना रहे हैं जिसे प्रोफ़ाइल पृष्ठ से प्रत्येक छात्र का डेटा प्राप्त करने की आवश्यकता है; इस स्थिति में, हमें इस डेटा को प्रोफ़ाइल घटक (पैरेंट घटक) से उपयोगकर्ता-प्रोफ़ाइल घटक (चाइल्ड घटक) तक पास करना होगा, और हम प्रॉप्स का उपयोग करेंगे।

रंगमंच की सामग्री

प्रॉप्स कस्टम विशेषताएँ हैं जिन्हें हम एक कंपोनेंट पर रजिस्टर कर सकते हैं, इसलिए हम पैरेंट कंपोनेंट से चाइल्ड कंपोनेंट तक डेटा पास कर सकते हैं props स्क्रिप्ट टैग के भीतर विकल्प:

<script>
export default { props: { title: String, }
}
</script> <template> <h4>{{ title }}</h4>
</template>

स्लॉट

Vue स्लॉट आरक्षित स्थान हैं जो हमें किसी भी प्रकार की सामग्री को एक घटक से दूसरे में स्थानांतरित करने की अनुमति देते हैं। यह प्रॉप्स की तुलना में अधिक केंद्रीकृत नियंत्रण देता है, क्योंकि प्रॉप्स के विपरीत, पैरेंट कंपोनेंट चाइल्ड कंपोनेंट के अंदर की सामग्री को नियंत्रित करता है। उदाहरण के लिए, हम निम्नलिखित बटन बना सकते हैं:

<!-- my-button.vue -->
<template> <button class="btn btn-style"> <slot>Click Me</slot> </button>
</template>

फिर हम इस घटक का कहीं भी उपयोग कर सकते हैं और इसे अपनी इच्छानुसार सामग्री दे सकते हैं। इसे सामग्री देने में विफलता का मतलब है कि यह हमारे द्वारा दिए गए डिफ़ॉल्ट मान का उपयोग करेगा (मुझे क्लिक करें):

<!-- my-form.vue -->
<template> <my-button> Submit Form <img src="/img/icons/arrow-icon.jpg"> </my-button>
</template>

कैसे Vue कंपोनेंट्स से इवेंट्स को एमिट करें

हमने सीखा कि पैरेंट कंपोनेंट से चाइल्ड कंपोनेंट तक डेटा भेजने के लिए प्रॉप्स का इस्तेमाल किया जाता है। लेकिन हमें आश्चर्य हो सकता है कि क्या चाइल्ड कंपोनेंट से पैरेंट कंपोनेंट को कुछ भेजने का कोई तरीका था। और जवाब है हाँईवेंट को चाइल्ड कंपोनेंट से पैरेंट कंपोनेंट में भी भेजा जा सकता है।

मान लें कि हमारे पास एक मूल घटक है (App.vue) जिसमें एक चाइल्ड घटक होता है (MyBlogPost.vue). इसके अलावा, चाइल्ड कंपोनेंट में एक बटन होता है जो शीर्षक को बदलने वाला होता है।

मान लें कि जब कोई बटन क्लिक किया जाता है तो हम अपने पृष्ठ का शीर्षक बदलना चाहते हैं, ताकि कोई फ़ंक्शन ट्रिगर हो जाए:

<!-- App.vue -->
<script>
import MyBlogPost from './BlogPost.vue' export default { components: { MyBlogPost }, data() { return { title: "Hello World" } }, methods:{ changeText: function(){ this.title = "New Title" } }
}
</script> <template> <div> <MyBlogPost :title="title" @change-text=changeText></MyBlogPost> </div>
</template>

और चाइल्ड कंपोनेंट इस तरह दिखेगा:

<!-- MyBlogPost.vue -->
<script>
export default { props: ['title'], emits: ['change-text']
}
</script> <template> <div class="blog-post"> <h4>{{ title }}</h4> <button @click="$emit('change-text')">Change Title</button> </div>
</template>

निष्कर्ष

इस गाइड में, हमने सीखा है कि कैसे Vue में घटकों के साथ काम करना है, जो कि Vue का उपयोग करने वाले किसी भी व्यक्ति के लिए आवश्यक है। हमने यह भी सीखा कि डेटा कैसे भेजना और प्राप्त करना है, साथ ही साथ घटनाओं को कैसे निकालना है।

• एसईओ संचालित सामग्री और पीआर वितरण। आज ही प्रवर्धित हो जाओ।
• प्लेटोब्लॉकचैन। Web3 मेटावर्स इंटेलिजेंस। ज्ञान प्रवर्धित। यहां पहुंचें।
• स्रोत: https://stackabuse.com/introduction-to-vue-components/