Vue घटकों के बीच संचार करने के लिए घटनाओं का उत्सर्जन कैसे करें

एक घटक आर्किटेक्चर का उपयोग करके अपने वेब एप्लिकेशन को संरचित करने से आपके एप्लिकेशन को बनाना और बनाए रखना आसान हो जाता है।

कस्टम ईवेंट उत्सर्जित करना एक ऐसा तरीका है जिससे आप घटकों के बीच संचार को संभाल सकते हैं; प्रॉप्स और स्लॉट दो अन्य हैं। कस्टम ईवेंट आपको चाइल्ड से मूल घटक तक डेटा भेजने की अनुमति देते हैं।

एक बच्चे से उसके माता-पिता तक घटनाएँ भेजें

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

यदि आप चाइल्ड से मूल घटक में डेटा भेजना चाहते हैं तो क्या होगा? Vue आपको चाइल्ड से पैरेंट घटकों में कस्टम इवेंट भेजने की अनुमति देता है। यह प्रक्रिया मूल घटक को चाइल्ड घटक से डेटा और फ़ंक्शंस का उपयोग करने में सक्षम बनाती है।

उदाहरण के लिए, एक फ़ंक्शन वाले बटन घटक की कल्पना करें जो प्रत्येक क्लिक पर एक मान लौटाता है। आपको उस घटना को मूल घटक में भेजने की आवश्यकता होगी ताकि मूल घटक अपनी स्थिति को अपडेट कर सके या लौटाए गए मान के आधार पर कोई कार्रवाई कर सके।

Vue में कस्टम उत्सर्जित घटनाओं के लिए नामकरण कन्वेंशन

कस्टम ईवेंट कैसे उत्सर्जित करें, इस पर विचार करने से पहले, आपको Vue में कस्टम ईवेंट के लिए नामकरण परंपरा को समझने की आवश्यकता है। Vue 3 के उभरने से पहले, डेवलपर्स को सख्ती से कस्टम इवेंट को परिभाषित करना पड़ता था कबाब-केस, नामों में शब्दों को हाइफ़न वर्ण से अलग करना।

HTML टेम्प्लेट के साथ काम करते समय अपने कस्टम ईवेंट को कबाब-केस में परिभाषित करना अब मानक अभ्यास है टेढ़े - मेढ़े लिखावट वाले बड़े संयुक्त शब्द जावास्क्रिप्ट के साथ काम करते समय। हालाँकि, आप जावास्क्रिप्ट के साथ काम करते समय किसी भी विकल्प का उपयोग करना चुन सकते हैं, क्योंकि Vue सभी कस्टम घटनाओं को कबाब-केस में संकलित करता है।

जब आप कोई कस्टम ईवेंट उत्सर्जित करते हैं, तो वर्णनात्मक नाम के साथ ईवेंट का उद्देश्य बताएं। यह बहुत महत्वपूर्ण है, खासकर जब आप किसी टीम में काम कर रहे हों, ताकि इवेंट का उद्देश्य स्पष्ट हो सके।

बच्चे से माता-पिता तक कस्टम ईवेंट कैसे प्रसारित करें

ऐसे दो तरीके हैं जिनसे आप Vue में कस्टम ईवेंट उत्सर्जित कर सकते हैं। आप इसके साथ कस्टम ईवेंट इनलाइन (सीधे Vue टेम्पलेट में) उत्सर्जित कर सकते हैं $उत्सर्जित करें वह विधि जो Vue प्रदान करती है। आप इसका भी उपयोग कर सकते हैं परिभाषित करता है मैक्रो Vue 3 से उपलब्ध है।

$emit विधि के साथ Vue में कस्टम ईवेंट उत्सर्जित करना

$उत्सर्जित करें, एक अंतर्निहित Vue विधि, एक चाइल्ड घटक को उसके मूल घटक को एक ईवेंट भेजने की अनुमति देती है। कस्टम इवेंट को ट्रिगर करने के लिए आप इस विधि को इन-लाइन (चाइल्ड कंपोनेंट के टेम्पलेट के भीतर) कहते हैं। $emit विधि दो तर्क लेती है: उस ईवेंट का नाम जिसे आप उत्सर्जित करना चाहते हैं और एक वैकल्पिक पेलोड जो अतिरिक्त डेटा ले जा सकता है।

इस चाइल्ड घटक पर विचार करें जो बटन क्लिक के बारे में मूल घटक को सूचित करने के लिए एक ईवेंट उत्सर्जित करता है:

 ChildComponent.vue 
<लिखी हुई कहानीस्थापित करना>
'व्यू' से आयात { रेफरी };
स्थिरांक पोस्ट = रेफरी('')
लिखी हुई कहानी>
<खाका>
<डिव>
<इनपुटप्रकार="मूलपाठ"वि मॉडल="डाक">
<बटनवी-ऑन: क्लिक करें="$emit('बटन-क्लिक', पोस्ट)">डाकबटन>
डिव>
खाका>

यह कोड ब्लॉक दिखाता है कि चाइल्ड कंपोनेंट से कस्टम इवेंट कैसे निकाला जाए। बच्चा एक खाली स्ट्रिंग के साथ एक पोस्ट वेरिएबल को प्रारंभ करके प्रारंभ करता है।

चाइल्ड कंपोनेंट फिर इनपुट एलिमेंट को वी-मॉडल, ए के साथ पोस्ट वेरिएबल से बांधता है Vue डेटा बाइंडिंग निर्देश. यह बाइंडिंग आपको पोस्ट वेरिएबल को स्वचालित रूप से अपडेट करने के लिए इनपुट फ़ील्ड में किए गए परिवर्तनों की अनुमति देता है।

बटन तत्व में एक वी-ऑन निर्देश है जो बटन पर क्लिक घटनाओं को सुनता है। बटन क्लिक $emit विधि को दो तर्कों के साथ कॉल करता है: इवेंट का नाम, "बटन-क्लिक", और पोस्ट वेरिएबल का मान।

मूल घटक अब वी-ऑन निर्देश के साथ कस्टम इवेंट को सुन सकता है Vue में घटनाओं को संभालना:

 ParentComponent.vue 
"Vue" से आयात {रेफरी };
चाइल्डकंपोनेंट को "./components/ChildComponent.vue" से आयात करें;
स्थिरांक पोस्टलिस्ट = रेफरी([])
स्थिरांक addPosts = (पोस्ट) => {
 पोस्टलिस्ट.वैल्यू.पुश (पोस्ट)
}
लिखी हुई कहानी>
<खाका>
<डिव>
<बाल घटक @बटन क्लिक किया गया="पोस्ट जोड़ें"/>
<उल>
<लीवी-के लिए="पोस्टलिस्ट में पोस्ट करें">{{ डाक }}ली>
उल>
डिव>
खाका>

यह कोड ब्लॉक पहले से चाइल्ड घटक को आयात और उपयोग करने वाले मूल घटक को दर्शाता है। मूल घटक परिभाषित करता है a पोस्टलिस्ट प्रतिक्रियाशील संदर्भ के रूप में सरणी चर। घटक तब एक को परिभाषित करता है ऐडपोस्ट फ़ंक्शन जो चलता है, a डाक तर्क। फ़ंक्शन पोस्टलिस्ट सरणी में एक नई पोस्ट जोड़ता है धकेलना() तरीका।

@बटन-क्लिक किया गया इवेंट श्रोता कस्टम इवेंट को कैप्चर करता है बाल घटक जब आप बटन क्लिक करते हैं तो उत्सर्जन होता है। यह ईवेंट ऐडपोस्ट फ़ंक्शन को चलाने का कारण बनता है। अंत में, कोड ब्लॉक संलग्न होता है वी-के लिए के लिए निर्देश Vue में सूचियाँ प्रस्तुत करना उल तत्व को पोस्टलिस्ट सरणी पर पुनरावृत्त करने के लिए।

डिफाइनइमिट्स मैक्रो के साथ ईवेंट उत्सर्जित करना

Vue 3 ने पेश किया परिभाषित करता है मैक्रो, जो स्पष्ट रूप से उन घटनाओं को परिभाषित करता है जो एक घटक उत्सर्जित कर सकता है। यह मैक्रो अधिक संरचित कोडबेस की ओर ले जाने वाली घटनाओं को उत्सर्जित करने का एक प्रकार-सुरक्षित तरीका प्रदान करता है।

यहां एक उदाहरण दिया गया है कि आप कैसे डिफाइनइमिट्स मैक्रो का उपयोग कर सकते हैं और इसे अपने चाइल्ड कंपोनेंट में कॉल कर सकते हैं:

 ChildComponent.vue 
<लिखी हुई कहानीस्थापित करना>
"Vue" से आयात {रेफरी };
कॉन्स्ट एमिट = डिफाइनइमिट्स(["बटन-क्लिक"]);
स्थिरांक पोस्ट = रेफरी ("");
स्थिरांक बटन क्लिक करें = () => {
 एमिट ("बटन-क्लिक किया गया", पोस्ट.वैल्यू);
};
लिखी हुई कहानी>
<खाका>
<डिव>
<इनपुटप्रकार="मूलपाठ"वि मॉडल="डाक" />
<बटनवी-ऑन: क्लिक करें="बटन क्लिक करें">डाकबटन>
डिव>
खाका>

जबकि कार्यक्षमता समान रहती है, उपरोक्त कोड ब्लॉक और वाले ब्लॉक के बीच कोड सिंटैक्स में महत्वपूर्ण अंतर होते हैं $उत्सर्जित करें समारोह।

इस कोड ब्लॉक में, परिभाषित करता है मैक्रो परिभाषित करता है बटन क्लिक किया गया आयोजन। इस मैक्रो को कॉल करके, कोड ब्लॉक एक $emit फ़ंक्शन लौटाता है, जिससे आप परिभाषित घटनाओं को उत्सर्जित कर सकते हैं। घटक के भीतर डिफाइनइमिट्स मैक्रो को पास की गई सरणी में वे सभी ईवेंट शामिल होंगे जिन्हें आपको मूल घटक में उत्सर्जित करने की आवश्यकता है।

इसके बाद, कोड ब्लॉक a को परिभाषित करता है बटन क्लिक करें समारोह। यह फ़ंक्शन बटन-क्लिक किए गए ईवेंट और पोस्ट वेरिएबल को मूल घटक में उत्सर्जित करता है। चाइल्ड घटक के टेम्पलेट ब्लॉक में एक बटन तत्व होता है।

बटन तत्व में एक है वी-ऑन: क्लिक करें बटनक्लिक फ़ंक्शन को ट्रिगर करने वाला निर्देश। फिर मूल घटक चाइल्ड घटक का उसी तरह उपयोग कर सकता है जैसे उसने $emit विधि के साथ किया था।

Vue डेवलपर्स को घटक-आधारित आर्किटेक्चर से लाभ होता है

आप $emit विधि और definEmits मैक्रो का उपयोग करके ईवेंट उत्सर्जित करके चाइल्ड घटक से उसके पैरेंट तक संचार कर सकते हैं।

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