Vue में चाइल्ड कंपोनेंट्स बनाना

कंपोनेंट्स के अंदर भी वही संरचना होती है जो मुख्य कंपोनेंट में होती है, जिसके साथ हमने पहले काम किया था। यानी प्रत्येक कंपोनेंट की फ़ाइल में टैग script और template होंगे।

चलिए उदाहरण के लिए User नाम का एक कंपोनेंट बनाते हैं। इसके कोड को संबंधित फ़ाइल में रखते हैं:

<script>
	export default {
		data() {
			return {
				
			}
		}
	}
</script>

data ऑब्जेक्ट में कुछ डेटा रख सकते हैं:

<script>
	export default {
		data() {
			return {
				name: 'john'
			}
		}
	}
</script>

इस डेटा को कंपोनेंट के व्यू में प्रदर्शित किया जा सकता है:

<template>
	{{ name }}
</template>

चलिए अब बनाए गए कंपोनेंट को मुख्य कंपोनेंट से कनेक्ट करते हैं। इसके लिए सबसे पहले इसे आयात करें:

<script>
	import User from './components/User.vue'
	
	export default {
		
	}
</script>

components सेटिंग में इसका नाम लिखें:

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

पैरेंट कंपोनेंट के व्यू में चाइल्ड कंपोनेंट का व्यू प्रदर्शित किया जा सकता है। इसके लिए एक टैग लिखना होगा जिसका नाम कंपोनेंट के नाम के अनुरूप हो। चलिए इसे करते हैं:

<template>
	<User />
</template>

Employee कंपोनेंट बनाएं। इसे मुख्य कंपोनेंट से कनेक्ट करें।