# Создание дочерних компонентов в 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`. Подключите его к основному компоненту.

←→
↑