Итоги

В этом уроке вы узнали, что:

• Страницу делят на компоненты, каждый в своём файле .vue, со своим шаблоном, <script setup> и <style scoped>, который оформляет только собственные элементы компонента. App.vue — главный из них.
• Компонент, который использует другой, импортирует его в своём <script setup>, import MenuItem from "./MenuItem.vue"; (.vue обязательно), и помещает в свой шаблон, <MenuItem />, столько раз, сколько нужно.
• Каждый файл — это модуль, и то, что в нём есть, существует только там, если файл этого не экспортирует. export default экспортирует главное значение файла, которое импортируют без скобок под выбранным именем. export const экспортирует значение по имени, и его импортируют в скобках: import { cafeName } from "./cafe.js";. <script setup> сам экспортирует свой компонент, а собственных экспортов у него быть не может.
• Компоненты называют в PascalCase, одинаково в файле, в импорте и в теге. Тег, записанный иначе, или отсутствующий импорт дают в консоли [Vue warn]: Failed to resolve component.
• Родитель передаёт данные компоненту через пропсы, которые компонент объявляет через defineProps: price: { type: Number, required: true } или со значением default. Без двоеточия проп — это текст, с двоеточием — JavaScript: :price="2", :item="item".
• Пропсы только для чтения. То, что принадлежит одному компоненту, — его собственное состояние, ref, и у каждой копии компонента оно своё.
• v-for работает с компонентами, вместе с :key, а целый объект может быть одним пропом.

В следующем уроке, «События компонентов», вы увидите, как компонент сообщает родителю, что что-то произошло, например что покупатель заказал пункт меню, чтобы родитель мог изменить свои данные.

Но сначала немного практики: отзывы о кафе. В Review.vue пока только стиль, а остальную часть компонента вы напишете сами.