Первый компонент

За последние уроки ваше приложение для кафе выросло: заголовок, меню, заказ с итогом, форма… Всё это лежит в App.vue, и с каждой новой возможностью файл становится длиннее. В файле на несколько сотен строк нужную часть искать долго. К тому же кое-что повторяется: каждый пункт меню выглядит одинаково, различаются только название и цена.

Поэтому приложения на Vue собирают из компонентов: частей страницы, каждая из которых лежит в своём файле .vue со своим шаблоном, скриптом и стилем. Один компонент вы уже знаете: App.vue — главный компонент приложения. А вот другой, MenuItem.vue, — один пункт меню:

<template>
    <li class="item">
        <span>Эспрессо</span>
        <span class="price">€2</span>
    </li>
</template>

<style scoped>
.item {
    display: flex;
    background: white;
}
</style>

В нём нет <script setup>, потому что переменные ему пока не нужны. Его <style scoped> оформляет только собственные элементы компонента: элемент с классом item в другом месте приложения этот стиль не получит.

Чтобы использовать компонент, App.vue импортирует его в своём <script setup> и помещает в шаблон так, как будто это HTML-элемент:

<script setup>
import MenuItem from "./MenuItem.vue";
</script>

<template>
    <h1>Кафе «Уголок»</h1>
    <ul class="menu">
        <MenuItem />
        <MenuItem />
    </ul>
</template>

import MenuItem from "./MenuItem.vue"; позволяет App.vue использовать компонент под именем MenuItem. ./ означает «в той же папке, что и этот файл», а .vue в конце обязательно. Без него под превью появится красная полоса с сообщением App.vue(2): укажите и расширение файла: «./MenuItem.vue».

В шаблоне <MenuItem /> заменяется шаблоном компонента. Тег закрывается сам, через />, потому что класть в него нечего. А использовать компонент можно сколько угодно раз: в этом списке два пункта, и оба сделаны из MenuItem.

В упражнениях с компонентами больше вкладок: сначала App.vue, потом компоненты, потом уже знакомые вам файлы main.js, index.html и style.css.