Creazione di Componenti Figli in Vue

I componenti internamente hanno la stessa struttura del componente principale con cui abbiamo lavorato in precedenza. Cioè in ogni file componente ci saranno i tag script e template.

Facciamo un esempio creando un componente chiamato User. Posizioniamo il suo codice nel relativo file:

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

Nell'oggetto data del componente si possono posizionare alcuni dati:

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

Questi dati possono essere visualizzati nella vista del componente:

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

Ora colleghiamo il componente creato da noi al componente principale. Per prima cosa importiamolo:

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

Inseriamo il suo nome nell'impostazione components:

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

Nella vista del componente genitore si può visualizzare la vista del componente figlio. Per fare questo bisogna scrivere un tag, il cui nome corrisponde al nome del componente. Facciamolo:

<template>
	<User />
</template>

Crea un componente Employee. Collega questo componente al componente principale.