Vytváření podřízených komponent ve Vue

Komponenty uvnitř mají stejnou strukturu jako hlavní komponenta, se kterou jsme pracovali dříve. To znamená, že v souboru každé komponenty budou značky script a template.

Pojďme pro příklad vytvořit komponentu s názvem User. Umístíme její kód do odpovídajícího souboru:

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

V objektu data komponenty lze umístit nějaká data:

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

Tato data lze zobrazit v prezentaci komponenty:

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

Nyní připojme vytvořenou komponentu k hlavní komponentě. K tomu ji nejprve importujeme:

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

Zapišme její název do nastavení components:

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

V prezentaci nadřazené komponenty lze zobrazit prezentaci podřízené komponenty. K tomu je třeba napsat značku, jejíž název odpovídá názvu komponenty. Pojďme to udělat:

<template>
	<User />
</template>

Vytvořte komponentu Employee. Připojte ji k hlavní komponentě.