Oprettelse af underkomponenter i Vue

Komponenter indeholder den samme struktur som hovedkomponenten, som vi arbejdede med tidligere. Det betyder, at i filen for hver komponent vil der være tags script og template.

Lad os for eksempel lave en komponent med navnet User. Vi placerer dens kode i den tilsvarende fil:

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

I komponentens data objekt kan man placere nogle data:

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

Disse data kan vises i komponentens præsentation:

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

Lad os nu tilslutte den oprettede komponent til hovedkomponenten. For at gøre dette skal vi først importere den:

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

Lad os skrive dens navn i indstillingen components:

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

I forælderkomponentens præsentation kan man vise underkomponentens præsentation. For at gøre dette skal man skrive et tag, hvis navn svarer til komponentens navn. Lad os gøre dette:

<template>
	<User />
</template>

Lav en komponent Employee. Tilslut den til hovedkomponenten.