Vue में एकतरफा डेटा प्रवाह

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

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

आमतौर पर दो मामले सामने आते हैं जब प्रॉप को बदलने का प्रलोभन होता है। आइए उन पर गौर करें।

पहला मामला

प्रॉप का उपयोग आरंभिक मूल्य (initial value) पास करने के लिए किया जाता है; चाइल्ड कंपोनेंट इसे आगे चलकर लोकल डेटा प्रॉपर्टी के रूप में उपयोग करना चाहता है। इस मामले में, डेटा में एक लोकल प्रॉपर्टी को परिभाषित करना सबसे अच्छा है जो प्रॉप के मूल्य को आरंभिक मान के रूप में उपयोग करती है:

props: ['initialCounter'],
data() {
	return {
		counter: this.initialCounter
	};
}

दूसरा मामला

प्रॉप एक कच्चे मूल्य (raw value) के रूप में पास की जाती है जिसे रूपांतरित (transform) करने की आवश्यकता है। इस मामले में, प्रॉप का उपयोग करके एक कंप्यूटेड प्रॉपर्टी (computed property) को परिभाषित करना सबसे अच्छा है:

props: ['size'],
computed: {
	normalizedSize: function() {
		return this.size.trim().toLowerCase();
	}
}

नोट

कृपया ध्यान दें कि JavaScript में ऑब्जेक्ट्स और ऐरेज़ (arrays) रेफ़रेंस (reference) द्वारा पास होते हैं, इसलिए यदि प्रॉप एक ऐरे या ऑब्जेक्ट है, तो चाइल्ड कंपोनेंट के अंदर उस ऑब्जेक्ट या ऐरे में किए गए परिवर्तन पैरेंट की स्थिति को प्रभावित करेंगे और Vue इसके बारे में चेतावनी देने में सक्षम नहीं है। प्रॉप्स में किसी भी तरह का म्यूटेशन (mutation), जिसमें ऑब्जेक्ट्स और ऐरेज़ शामिल हैं, से बचना चाहिए, क्योंकि डेटा बाइंडिंग की एकतरफ़ा प्रकृति को नज़रअंदाज करने से अवांछित परिणाम हो सकते हैं।