Ustvarjanje podrejenih komponent v Vue

Komponente imajo znotraj enako strukturo kot glavna komponenta, s katero smo delali prej. To pomeni, da bodo v datoteki vsake komponente značke script in template.

Za primer naredimo komponento z imenom User. Njeno kodo postavimo v ustrezno datoteko:

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

V objektu data komponente lahko postavimo nekatere podatke:

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

Te podatke je mogoče prikazati v predstavitvi komponente:

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

Zdaj povežimo ustvarjeno komponento z glavno komponento. Za to jo najprej uvozimo:

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

Njeno ime zapišimo v nastavitev components:

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

V predstavitvi nadrejene komponente je mogoče prikazati predstavitev podrejene komponente. Za to je treba napisati značko, katere ime ustreza imenu komponente. Naredimo to:

<template>
	<User />
</template>

Naredite komponento Employee. Povežite jo z glavno komponento.