Creating Child Components in Vue

The components inside have the same structure as the main component we worked with earlier. That is, each component file will have script and template tags.

Let's make a component called User as an example. Place its code in the corresponding file:

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

You can place some data in the data component object:

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

This data can be displayed in the component view:

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

Let's now connect the component we created to the main component. To do this, first import it:

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

Let's write its name in the components setting:

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

In the parent component view, you can display the child component view. To do this, you need to write a tag whose name matches the component name. Let's do this:

<template>
	<User />
</template>

Make a Employee component. Connect it to the main component.