Module Recap
Module 02 covered the building blocks of any Vue app: components, template syntax, props, emits, and slots. These concepts work together to create a tree of self-contained, reusable pieces.
What you learned
Section titled “What you learned”Components are self-contained UI pieces. Each .vue file is a component definition. Multiple instances can be used in a single template, each independent. Import in <script setup> — no manual registration needed.
Template syntax is HTML + expressions. {{ value }} interpolates data; :attr="value" binds dynamic attributes; @event="handler" attaches event listeners. Complex logic belongs in <script setup>, not the template.
Props carry data down. defineProps<{ ... }>() declares a component’s inputs with TypeScript types. The parent passes values as attributes. Props are read-only in the child.
Emits carry signals up. defineEmits<{ eventName: [payload] }>() declares what events a component fires. emit('eventName', payload) fires the event. The parent listens with @event-name="handler".
Slots project content. <slot /> marks where parent-supplied HTML appears. Named slots allow multiple injection points. Use slots for structural flexibility; use props for data.
How this connects to FamilyTree
Section titled “How this connects to FamilyTree”FamilyTree uses every concept from this module:
PersonCard uses defineProps to accept a Person object and a role string. It uses defineEmits to fire a select event with the person’s id when clicked. The parent — FocusView or PersonDetailView — listens with @select to change focus or navigate.
PersonForm uses defineProps to accept an optional initial person for pre-populating the edit form. It uses defineEmits to fire submit with the form data and cancel to dismiss.
FocusView renders multiple PersonCard instances — one for each parent, the focus person, the spouse, and each child — passing different data via props to the same component definition.
Key terms
Section titled “Key terms”| Term | What it means |
|---|---|
defineProps<{ ... }>() | Declares a component’s typed input props |
withDefaults | Provides fallback values for optional props |
defineEmits<{ ... }>() | Declares the typed events a component can fire |
emit('name', payload) | Fires an event from the child component |
@eventName="handler" | Listens for an event in the parent template |
<slot /> | Marks where parent-supplied content appears |
| Named slot | <slot name="x" /> — a specific injection point |
<template #name> | Parent syntax for targeting a named slot |
What is next
Section titled “What is next”Module 03 — Reactivity and State →
Module 03 goes deep on Vue’s reactive system — the engine that makes components update automatically. You’ll learn ref, reactive, computed, watch, and lifecycle hooks. These are the APIs FamilyTree’s store uses to track people and their relationships.