Summary

In this lesson, you learned that:

  • A page is split into components, each in a .vue file of its own, with its own template, <script setup> and <style scoped>, which styles only the component's own elements. App.vue is the main one.
  • A component that uses another imports it in its <script setup>, import MenuItem from "./MenuItem.vue"; (the .vue is required), and puts it into its template, <MenuItem />, as many times as it needs.
  • Each file is a module, and what's in it exists only there, unless the file exports it. export default exports the file's main value, which is imported without braces under a name you choose. export const exports a value by its name, which is imported in braces: import { cafeName } from "./cafe.js";. <script setup> exports its component by itself and can't have exports of its own.
  • Components are named in PascalCase, the same in the file, the import and the tag. A tag spelled differently or a missing import gives [Vue warn]: Failed to resolve component in the console.
  • A parent passes data to a component in props, which the component declares with defineProps: price: { type: Number, required: true }, or with a default. Without a colon, a prop is text; with a colon, it's JavaScript: :price="2", :item="item".
  • Props are read-only. What belongs only to the component is its own state, a ref, and each copy of the component has its own.
  • v-for works on components, with :key, and a whole object can be one prop.

In the next lesson, Component Events, you'll see how a component tells its parent that something happened, for example that the customer ordered an item, so that the parent can change its data.

But first, a little practice: the café's reviews. Review.vue has only its style, and you'll write the rest of the component yourself.

Instructions

  1. In Review.vue, write a component with two required props: author, a text, and stars, a number. It shows an <li class="review"> with the author in a <strong> and, after it, as many ★ as the review has stars, in a <span class="stars"> (v-for can go over a number). In App.vue, import it and show a Review for each review in the list.

  2. Add a prop text, a text with the default "No comment.", which the review shows in a <p> under the author. Eva's review has no text, so hers says No comment.

BackNext