Создание компонентов, директива components в Vue

Компоненты представляют именованные объекты, к которым фреймворк Vue прикрепляет некоторое поведение. Компоненты позволяют инкапсулировать код и затем использовать его многократно в различных частях приложения.

Компоненты внутри имеют такую же структуру, как и основной компонент. То есть в файле каждого компонента будут теги script, template, style.

Давайте для примера сделаем компонент с названием User. Разместим его код в соответствующем файле, в папке components. В объекте data компонента можно разместить какие-то данные:

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

Эти данные можно вывести в представлении компонента:

App.vue<template>
    {{ name }}
</template>

Нужно подключить созданный нами дочерний компонент к основному компоненту. Для этого нужно импортировать его:

App.vue<script>
    import User from './components/User.vue'

    export default {

    }
</script>

Пропишем его имя в настройке components:

App.vue<script>
    import User from './components/User.vue'

    export default {
        components: {
            User
        }
    }
</script>

В представлении родительского компонента можно вывести представление дочернего компонента. Для этого нужно написать тег, имя которого соответствует имени компонента. Давайте сделаем это:

App.vue<template>
    <User />
</template>