Δημιουργία θυγατρικών components στο Vue

Τα components εσωτερικά έχουν την ίδια δομή, όπως και το κύριο component, με το οποίο δουλέψαμε νωρίτερα. Δηλαδή στο αρχείο κάθε component θα υπάρχουν οι ετικέτες script και template.

Ας κάνουμε για παράδειγμα ένα component με το όνομα User. Ας τοποθετήσουμε τον κώδικά του στο αντίστοιχο αρχείο:

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

Στο αντικείμενο data του component μπορούμε να τοποθετήσουμε κάποια δεδομένα:

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

Αυτά τα δεδομένα μπορούν να εμφανιστούν στην προβολή του component:

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

Ας συνδέσουμε τώρα το component που δημιουργήσαμε στο κύριο component. Για αυτό πρώτα εισάγουμε αυτό:

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

Ας γράψουμε το όνομά του στη ρύθμιση components:

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

Στην προβολή του γονικού component μπορεί να εμφανιστεί η προβολή του θυγατρικού component. Για αυτό πρέπει να γράψετε μια ετικέτα, το όνομα της οποίας αντιστοιχεί στο όνομα του component. Ας το κάνουμε αυτό:

<template>
	<User />
</template>

Δημιουργήστε το component Employee. Συνδέστε το στο κύριο component.