Como componentes e props funcionam em Vue?

Question

Accepted Answer

**Componentes** são peças de UI reutilizáveis e independentes. **Props** são como um pai passa dados *para baixo* para um filho — são as entradas digitadas e somente leitura do filho. ## Definindo props no filho ```vue ``` ## Passando props do pai ```vue ``` Note a diferença: `name="Ann"` passa uma string literal, enquanto `:age="30"` (com `v-bind`) avalia uma expressão — necessário para números, booleanos, objetos ou variáveis. Também note que nomes de props são `camelCase` em JS, mas `kebab-case` em templates (`isAdmin` → `:is-admin`). ## Props são unidirecionais e somente leitura ```js props.name = "Bob"; // ❌ Vue warns — never mutate a prop ``` Os dados fluem **para baixo** (pai → filho). Um filho não deve modificar seus props; se precisar mudar algo, usa uma cópia local ou **emite um evento** pedindo ao pai para mudar a fonte ("props para baixo, eventos para cima"). Este fluxo unidirecional mantém os dados previsíveis. ## Props com TypeScript ```vue ``` ## Por que isso importa Componentes + props são a base da arquitetura Vue — você compõe UIs a partir de componentes reutilizáveis e os configura via props. Entender que props são **unidirecionais e somente leitura** (dados para baixo, eventos para cima) é o modelo mental essencial que mantém aplicações Vue previsíveis; mutar props ou esperar um fluxo de props bidirecional é uma fonte clássica de bugs.