การสร้างคอมโพเนนต์ลูกใน 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 เชื่อมต่อมันกับคอมโพเนนต์หลัก