Kreiranje podređenih komponenti u Vue

Komponente unutra imaju istu strukturu kao glavna komponenta s kojom smo ranije radili. To znači da će u fajlu svake komponente biti tagovi script i template.

Hajde za primer napravimo komponentu pod nazivom User. Postavimo njen kod u odgovarajući fajl:

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

U objektu data komponente možemo postaviti neke podatke:

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

Ove podatke možemo prikazati u predstavu komponente:

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

Hajde sada da povežemo kreiranu komponentu sa glavnom komponentom. Za to prvo importujmo je:

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

Zapišimo njeno ime u postavci components:

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

U predstavu roditeljske komponente možemo prikazati predstav podređene komponente. Za to treba napisati tag čije ime odgovara imenu komponente. Hajde da uradimo to:

<template>
	<User />
</template>

Napravite komponentu Employee. Povežite je sa glavnom komponentom.