Come funzionano i componenti e i props in Vue?

Question

Accepted Answer

**I componenti** sono pezzi di UI riutilizzabili e autonomi. **I props** sono il modo in cui un genitore passa dati *verso il basso* a un figlio — sono gli input tipizzati e di sola lettura del figlio. ## Definire i props nel figlio ```vue ``` ## Passare i props dal genitore ```vue ``` Nota la differenza: `name="Ann"` passa una stringa letterale, mentre `:age="30"` (con `v-bind`) valuta un'espressione — necessario per numeri, booleani, oggetti o variabili. Nota anche che i nomi dei props sono `camelCase` in JS ma `kebab-case` nei template (`isAdmin` → `:is-admin`). ## I props sono monodirezionali e di sola lettura ```js props.name = "Bob"; // ❌ Vue warns — never mutate a prop ``` I dati fluiscono **verso il basso** (genitore → figlio). Un figlio non deve modificare i suoi props; se ha bisogno di cambiare qualcosa, utilizza una copia locale o **emette un evento** chiedendo al genitore di cambiare la fonte ("props giù, eventi su"). Questo flusso monodirezionale mantiene i dati prevedibili. ## Props con TypeScript ```vue ``` ## Perché è importante I componenti + props sono il fondamento dell'architettura Vue — componi le UI da componenti riutilizzabili e configurali tramite props. Capire che i props sono **monodirezionali e di sola lettura** (dati giù, eventi su) è il modello mentale core che mantiene le app Vue prevedibili; mutare i props o aspettarsi un flusso bidirezionale dei props è una fonte classica di bug.