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 কম্পোনেন্ট তৈরি করুন। এটিকে মূল কম্পোনেন্টের সাথে সংযোগ করুন।