Criação de Componentes Filhos no Vue

Os componentes internamente têm a mesma estrutura que o componente principal com o qual trabalhamos anteriormente. Ou seja, no arquivo de cada componente haverá as tags script e template.

Vamos, por exemplo, criar um componente chamado User. Vamos colocar seu código no arquivo correspondente:

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

No objeto data do componente, você pode colocar alguns dados:

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

Esses dados podem ser exibidos no template do componente:

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

Agora, vamos conectar o componente criado por nós ao componente principal. Para isso, primeiro vamos importá-lo:

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

Vamos registrar seu nome na opção components:

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

No template do componente pai, é possível exibir o template do componente filho. Para isso, é necessário escrever uma tag cujo nome corresponda ao nome do componente. Vamos fazer isso:

<template>
	<User />
</template>

Crie um componente Employee. Conecte-o ao componente principal.