Summary

In this lesson, you learned that:

• A component can leave a place in its template for content from its parent: <slot />. The parent puts the content between the component's tags, and Vue shows it in place of the slot. A component without a slot leaves the content out, without a warning.
• The content of a slot belongs to the parent: it uses the parent's refs, computed values and functions, and the parent's styles. It can't see the component's props or variables, and the component's <style scoped> doesn't style it.
• What's between <slot> and </slot> is fallback content. It shows when the parent gives the slot no content, or content that shows nothing, such as an element whose v-if is false.
• A component can have several slots with names: <slot name="footer" />. The parent fills them with <template #footer>, where #footer is short for v-slot:footer. Content outside such a <template> goes into the default slot, the one without a name.
• Data and short texts go into props, pieces of the page into slots. Components that give the page its shape, such as a panel, a card or a dialog, have slots, so that you can use them again with any content.

In the next lesson, Checkpoint: Photo Gallery, you'll put components, props, events and slots together in a gallery of photos from a trip.

But first, a little practice: a box for the café's tips, InfoBox.vue. Its style is ready, and you'll write its template yourself.