Vue घटक टेम्पलेट का विस्तार

समस्याओं को खत्म करने के लिए हमारे साधन का प्रयास करें

क्या आप स्वयं को किसी घटक का विस्तार करना चाहते हैं? टेम्पलेट ? Vue घटक को निकालने और पुन: उपयोग करने के कई साधन प्रदान करता है तर्क और स्थिति , लेकिन टेम्प्लेट को केवल एकल-उपयोग समझा जाता है।

प्रतिक्रिया-डीएनडी-ग्रिड

इस लेख में, मैं HTML टेम्प्लेट प्री-प्रोसेसर का उपयोग करके एक समाधान प्रस्तुत करूँगा बंदर . यह थोड़ा हैक है, लेकिन यह काम करता है!

यदि आप किसी घटक का विस्तार करना चाहते हैं तर्क और स्थिति , आप शायद मेरा दूसरा लेख पढ़ना चाहते हैं Vue.js घटकों का विस्तार जिसमें कंपोजिशन फंक्शंस, मिक्सिन्स, हायर-ऑर्डर कंपोनेंट्स आदि शामिल हैं। यहां हम टेम्प्लेट के बारे में बात कर रहे हैं।



केस स्टडी: एक सर्वे ऐप

मान लें कि आप Vue के साथ एक घटक-आधारित सर्वेक्षण ऐप बनाने का प्रयास कर रहे हैं जो इस तरह दिखता है:

गूगल डॉक्स स्टॉक पोर्टफोलियो टेम्पलेट

ध्यान दें कि प्रत्येक सर्वेक्षण प्रश्न का एक अलग इनपुट प्रकार होता है:

  1. पाठ इनपुट
  2. इनपुट चुनें
  3. रेडियो इनपुट

एक स्पष्ट वास्तुकला प्रत्येक प्रश्न को एक अलग घटक में बनाना होगा, जो कि हम करने जा रहे हैं। इन घटकों को नाम दें:

  1. SurveyInputText
  2. SurveyInputSelect
  3. SurveyInputRadio

आधार घटक

आइए पहले एक आधार घटक बनाएं जिसे कहा जाता है सर्वेइनपुट.vue . इसके बारे में निम्नलिखित पर ध्यान दें:

  • |_+_| प्रत्येक घटक में प्रोप आम होने जा रहा है। यह प्रश्न पाठ को कैप्चर करता है उदा। तुम्हारा नाम क्या हे।
  • हमारे पास कोई साझा तर्क नहीं है, लेकिन आप इसे जोड़ सकते हैं उदा। सत्यापन और त्रुटि तर्क
  • मैं एक अंतर छोड़ रहा हूँ जहाँ इनपुट तत्व को जाने की आवश्यकता होगी। यह वह जगह है जहां हम टेम्पलेट का विस्तार करेंगे जैसा कि आप जल्द ही देखेंगे।
question

राज्य और तर्क पुन: उपयोग

एक पल के लिए टेम्पलेट को अनदेखा करते हुए, राज्य/तर्क के निष्कर्षण और पुन: उपयोग के लिए हमारी रणनीति क्या होगी? हम यहां जो चुनते हैं, वह घटक टेम्पलेट को विस्तारित करने की हमारी क्षमता को प्रभावित नहीं करेगा, इसलिए बेझिझक मिक्सिन, उच्च-क्रम वाले घटकों, या यहां तक ​​कि नए कंपोज़िशन एपीआई का उपयोग करें। मैं इसे सरल रखने जा रहा हूँ और |_+_| घटक विकल्प।

फिर से, इस बारे में अभी भी एक लटकता हुआ प्रश्न है कि हम इस उप-घटक में आधार टेम्पलेट कैसे प्राप्त करते हैं, जैसा कि |_+_| एपीआई टेम्प्लेट पर लागू नहीं होता है!

{{ question }}

export default { props: { question: String } }

# vue.js #घटक #रचना एपीआई #टेम्पलेट्स #vue

गूगल प्लेस स्वत: पूर्ण उदाहरण

vuejsdevelopers.com

Vue घटक टेम्पलेट का विस्तार

Vue एक घटक की स्थिति और तर्क को निकालने और पुन: उपयोग करने का एक तरीका प्रदान करता है, लेकिन टेम्पलेट को केवल एकल-उपयोग माना जाता है। इस लेख में, मैं आपको HTML प्री-प्रोसेसिंग का उपयोग करके टेम्प्लेट को विस्तारित करने के लिए एक हैक दिखाऊंगा। इस लेख में, मैं HTML टेम्प्लेट प्री-प्रोसेसर पग का उपयोग करके एक समाधान प्रस्तुत करूंगा। यह थोड़ा हैक है, लेकिन यह काम करता है!

यह सभी देखें:

नई वस्तुएं

सबसे पठनीय

संपादक की पसंद