Skapa underkomponenter i Vue

Komponenter inuti har samma struktur som huvudkomponenten som vi arbetade med tidigare. Det betyder att varje komponents fil kommer att innehålla taggarna script och template.

Låt oss som exempel skapa en komponent med namnet User. Vi placerar dess kod i motsvarande fil:

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

I komponentens data-objekt kan man placera viss data:

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

Denna data kan visas i komponentens vy:

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

Låt oss nu ansluta den skapade komponenten till huvudkomponenten. För att göra detta, importera den först:

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

Låt oss registrera dess namn i inställningen components:

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

I förälderkomponentens vy kan man visa underkomponentens vy. För att göra detta måste man skriva en tagg vars namn motsvarar komponentens namn. Låt oss göra detta:

<template>
	<User />
</template>

Skapa en komponent Employee. Anslut den till huvudkomponenten.