Comment fonctionnent les composants et les props dans Vue ?

Question

Accepted Answer

**Components** sont des morceaux d'UI réutilisables et autonomes. **Props** sont la façon dont un parent transmet des données *vers le bas* à un enfant — ce sont les entrées typées et en lecture seule de l'enfant. ## Définir les props dans l'enfant ```vue ``` ## Transmettre les props depuis le parent ```vue ``` Notez la différence : `name="Ann"` transmet une chaîne littérale, tandis que `:age="30"` (avec `v-bind`) évalue une expression — nécessaire pour les nombres, booléens, objets ou variables. Notez aussi que les noms de props sont en `camelCase` en JS mais en `kebab-case` dans les templates (`isAdmin` → `:is-admin`). ## Les props sont unidirectionnelles et en lecture seule ```js props.name = "Bob"; // ❌ Vue warns — never mutate a prop ``` Les données s'écoulent **vers le bas** (parent → enfant). Un enfant ne doit pas modifier ses props ; s'il doit changer quelque chose, il utilise soit une copie locale, soit **émet un événement** demandant au parent de changer la source (« props vers le bas, événements vers le haut »). Ce flux unidirectionnel rend les données prévisibles. ## Props TypeScript ```vue ``` ## Pourquoi c'est important Components + props sont la fondation de l'architecture Vue — vous composez des UIs à partir de composants réutilisables et les configurez via les props. Comprendre que les props sont **unidirectionnelles et en lecture seule** (données vers le bas, événements vers le haut) est le modèle mental fondamental qui rend les applications Vue prévisibles ; muter les props ou s'attendre à un flux prop bidirectionnel est une source classique de bugs.