Lapsekomponentide loomine Vue's

Komponendid sisemuses on samasuguse struktuuriga nagu põhikomponent, millega me varem töötasime. See tähendab, et iga komponendi failis on sildid script ja template.

Teeme näiteks komponendi nimega User. Paigutame selle koodi vastavasse faili:

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

Komponendi data objekti saab paigutada mõningaid andmeid:

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

Neid andmeid saab kuvada komponendi esitluses:

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

Ühendame nüüd loodud komponendi põhikomponendiga. Selleks impordime selle kõigepealt:

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

Kirjutame selle nime seadistusse components:

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

Vanemkomponendi esitluses saab kuvada lapsekomponendi esitlust. Selleks tuleb kirjutada silt, mille nimi vastab komponendi nimele. Teeme seda:

<template>
	<User />
</template>

Tehke komponent Employee. Ühendage see põhikomponendiga.