Creación de componentes hijos en Vue

Los componentes internamente tienen la misma estructura que el componente principal, con el que trabajamos anteriormente. Es decir, en el archivo de cada componente habrá etiquetas script y template.

Pongamos como ejemplo hacer un componente con el nombre User. Coloquemos su código en el archivo correspondiente:

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

En el objeto data del componente se pueden colocar algunos datos:

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

Estos datos se pueden mostrar en la vista del componente:

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

Ahora conectemos el componente creado por nosotros al componente principal. Para esto primero importémoslo:

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

Escribamos su nombre en la configuración components:

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

En la vista del componente padre se puede mostrar la vista del componente hijo. Para esto hay que escribir una etiqueta, cuyo nombre corresponda al nombre del componente. Hagamos esto:

<template>
	<User />
</template>

Haz el componente Employee. Conéctalo al componente principal.