How do components and props work in Vue?

Question

IT Interview Practice · Accepted Answer

**Components** are reusable, self-contained pieces of UI. **Props** are how a parent passes data *down* to a child — they're the child's typed, read-only inputs. ## Defining props in the child ```vue ``` ## Passing props from the parent ```vue ``` Note the difference: `name="Ann"` passes a literal string, while `:age="30"` (with `v-bind`) evaluates an expression — needed for numbers, booleans, objects, or variables. Also note prop names are `camelCase` in JS but `kebab-case` in templates (`isAdmin` → `:is-admin`). ## Props are one-way and read-only ```js props.name = "Bob"; // ❌ Vue warns — never mutate a prop ``` Data flows **down** (parent → child). A child must not modify its props; if it needs to change something, it either uses a local copy or **emits an event** asking the parent to change the source ("props down, events up"). This one-way flow keeps data predictable. ## TypeScript props ```vue ``` ## Why it matters Components + props are the foundation of Vue architecture — you compose UIs from reusable components and configure them via props. Understanding that props are **one-way and read-only** (data down, events up) is the core mental model that keeps Vue apps predictable; mutating props or expecting two-way prop flow is a classic source of bugs.

Defining props in the child

Passing props from the parent

Props are one-way and read-only

TypeScript props

Why it matters

Related questions