Создание дочерних компонентов в 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>