Създаване на дъщерни компоненти във Vue

Компонентите вътрешно имат същата структура като основния компонент, с който работихме преди. Това означава, че във файла на всеки компонент ще има тагове script и template.

Нека за пример направим компонент с име User. Ще разположим кода му в съответния файл:

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

В обекта data на компонента може да се разположат някои данни:

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

Тези данни могат да бъдат показани в изгледа на компонента:

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

Нека сега свържем създадения от нас компонент към основния компонент. За това първо ще го импортираме:

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

Ще запишем името му в настройката components:

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

В изгледа на родителския компонент може да се покаже изгледа на дъщерния компонент. За това трябва да се напише таг, чието име съответства на името на компонента. Нека направим това:

<template>
	<User />
</template>

Направете компонент Employee. Свържете го към основния компонент.