Tu veux booster tes compétences en Vue.js et comprendre enfin comment fonctionnent ces fameuses props dont tout le monde parle ? Tu es tombé au bon endroit ! 🎯 Les props sont un des concepts fondamentaux de Vue.js que tu dois absolument maîtriser pour créer des applications performantes et bien structurées.

Que tu sois débutant ou développeur avec quelques projets Vue à ton actif, je vais te démystifier tout ça. Les props, c’est la façon dont les composants Vue communiquent entre eux, et crois-moi, tu vas utiliser ça tous les jours dans tes projets !

Dans cet article, je vais te montrer comment déclarer tes props, comment les valider pour éviter les bugs, et surtout comment les utiliser efficacement dans des situations concrètes. On va voir les différentes syntaxes possibles, les bonnes pratiques, et les pièges à éviter.

Prêt à faire passer ton code Vue au niveau supérieur ? C’est parti ! 👨‍💻

Pas le temps de tout lire ?

  • Définition : Les props sont des propriétés personnalisées permettant de passer des données d’un composant parent à un enfant
  • Déclaration : Tu peux utiliser defineProps() dans les composants avec script setup ou l’option props dans les composants classiques
  • Validation : Vue.js permet de valider le type des props (String, Number, Boolean…) et de définir si elles sont requises ou non
  • Flux de données : Les props suivent un flux unidirectionnel du parent vers l’enfant, jamais l’inverse
  • Réactivité : Les props sont réactives, ce qui signifie que ton composant se met à jour automatiquement quand elles changent

Qu’est-ce qu’une prop dans Vue.js ?

Avant de plonger dans le code, clarifions ce concept. Les props (abréviation de ‘properties’) sont simplement le moyen par lequel les composants Vue reçoivent des données de leur composant parent. Tu peux voir ça comme des attributs personnalisés que tu ajoutes à tes composants.

Imagine que tu crées un composant réutilisable, comme un bouton personnalisé. Tu voudras sûrement pouvoir changer son texte, sa couleur ou sa taille selon l’endroit où tu l’utilises dans ton application. C’est exactement à ça que servent les props ! 🔄

Voici un exemple simple :

Parent qui passe des données :

<MonBouton texte='Cliquez-moi' couleur='rouge' />

Et le composant enfant qui les reçoit :

<button :class='couleur'>{{ texte }}</button>

Ici, ‘texte’ et ‘couleur’ sont des props que le composant MonBouton s’attend à recevoir de son parent. Simple, non ? Maintenant, voyons comment ça se met en place concrètement.

Comment déclarer des props dans Vue.js ?

En Vue.js, la déclaration des props est obligatoire. Le framework a besoin de savoir quelles propriétés sont des props et lesquelles sont des attributs HTML standard. Il existe plusieurs façons de déclarer tes props, selon la syntaxe que tu utilises pour tes composants.

Avec <script setup> (Vue 3)

Dans les Single File Components (SFC) utilisant la syntaxe <script setup>, tu peux déclarer tes props avec la fonction defineProps() :

<script setup>const props = defineProps(['texte', 'couleur'])console.log(props.texte) // Accès à la prop</script>

C’est la méthode la plus concise et moderne en Vue 3. La macro defineProps() est automatiquement disponible dans <script setup> sans avoir besoin de l’importer ! 🎉

Avec les composants classiques (Options API)

Si tu préfères l’API d’options traditionnelle, tu peux utiliser l’option props :

export default {  props: ['texte', 'couleur'],  created() {    // Les props sont accessibles via this    console.log(this.texte)  }}

Les deux approches font exactement la même chose, c’est juste une question de style d’écriture. Choisis celle qui correspond le mieux à ton projet !

Déclaration avec validation de type

Au lieu d’utiliser un simple tableau de chaînes, tu peux être plus précis en spécifiant les types attendus pour chaque prop. C’est une excellente pratique qui te sauvera beaucoup de débogage :

<script setup>defineProps({  texte: String,  couleur: String,  taille: Number})</script>

Ou avec l’API d’options :

export default {  props: {    texte: String,    couleur: String,    taille: Number  }}

Vue vérifiera automatiquement que les props passées correspondent aux types spécifiés et te préviendra dans la console si ce n’est pas le cas. Super pratique pour attraper les bugs tôt ! 🐛

Validation avancée des props

La validation simple des types, c’est bien, mais on peut aller beaucoup plus loin ! Vue offre un système de validation des props très puissant qui te permet de t’assurer que tes composants reçoivent exactement les données dont ils ont besoin.

Voici un exemple complet des options de validation disponibles :

defineProps({  // Validation de type basique  age: Number,    // Plusieurs types possibles  identifiant: [String, Number],    // Prop obligatoire  nom: {     type: String,     required: true   },    // Prop avec valeur par défaut  couleur: {     type: String,     default: 'bleu'   },    // Objet avec valeur par défaut  config: {    type: Object,    default() {      return { theme: 'clair', taille: 'medium' }    }  },    // Fonction de validation personnalisée  status: {    validator(value) {      return ['actif', 'inactif', 'en attente'].includes(value)    }  }})

Ces validations t’aident à créer des composants robustes et fiables. Quand une validation échoue, Vue affiche un avertissement dans la console mais continue à exécuter l’application (ce qui est super en développement) ! 🛠️

Types de props supportés

Vue te permet d’utiliser les constructeurs natifs de JavaScript comme types de props :

  • String
  • Number
  • Boolean
  • Array
  • Object
  • Date
  • Function
  • Symbol
  • Error

Tu peux même utiliser tes propres classes personnalisées comme types ! Par exemple :

class Personne {  constructor(prenom, nom) {    this.prenom = prenom    this.nom = nom  }}// Utilisation comme type de propdefineProps({  auteur: Personne})

Vue vérifiera si la valeur est une instance de cette classe avec l’opérateur instanceof. Pratique pour les types complexes ! 🧩

Comment passer des props à un composant

Maintenant que tu sais déclarer et valider tes props, voyons comment les passer d’un composant parent à un enfant. Il existe principalement deux façons de le faire :

Props statiques vs dynamiques

Pour passer une valeur statique (qui ne change pas) :

<MonBlogPost titre='Mon voyage avec Vue.js' />

Pour passer une valeur dynamique (variable ou expression) :

<MonBlogPost :titre='article.titre' />

Tu as remarqué le deux-points (‘:’) devant l’attribut ? C’est un raccourci pour v-bind qui indique à Vue que ce qui suit est une expression JavaScript et non une simple chaîne de caractères. 🔄

Passer différents types de valeurs

Tu peux passer pratiquement n’importe quel type de données en tant que prop :

Nombres

<!-- Même si 42 est statique, on a besoin de v-bind pour indiquer que c'est un nombre --><MonComposant :nombre='42' /><!-- Nombre dynamique --><MonComposant :nombre='article.nbCommentaires' />

Booléens

<!-- Inclure la prop sans valeur implique 'true' --><MonComposant estPublie /><!-- Valeur booléenne explicite --><MonComposant :estPublie='false' />

Tableaux

<MonComposant :commentaires='['Super article !', 'Merci pour ces infos']' />

Objets

<MonComposant :auteur='{ nom: 'Dupont', prenom: 'Jean' }' />

Et pour les objets complexes, tu peux même passer toutes les propriétés d’un objet en une seule fois avec v-bind sans argument :

// Dans le parentconst article = {  id: 1,  titre: 'Comprendre les props de Vue.js',  contenu: 'Les props sont essentielles...'}// Dans le template<MonBlogPost v-bind='article' />

C’est équivalent à :

<MonBlogPost :id='article.id' :titre='article.titre' :contenu='article.contenu' />

Beaucoup plus concis, non ? 😍

Flux de données unidirectionnel

Un principe fondamental à comprendre avec les props : elles suivent un flux de données unidirectionnel, du parent vers l’enfant. Jamais dans l’autre sens !

Cela signifie que :

  • Quand le composant parent se met à jour, les nouvelles valeurs des props sont transmises aux enfants
  • Mais tu ne peux pas modifier directement une prop dans un composant enfant

Si tu essaies de modifier une prop, Vue te préviendra avec un avertissement :

const props = defineProps(['message'])// ❌ Warning! Les props sont en lecture seuleprops.message = 'Nouveau message'

Pourquoi cette règle ? Pour éviter que les enfants ne modifient accidentellement l’état du parent, ce qui rendrait le flux de données difficile à comprendre et à déboguer. 🚫

Que faire si tu dois modifier une prop ?

Il y a généralement deux cas où tu pourrais être tenté de modifier une prop :

1. Utiliser la prop comme valeur initiale locale

Si tu veux utiliser une prop comme point de départ, puis la modifier localement :

const props = defineProps(['compteurInitial'])// On crée une copie locale avec refconst compteur = ref(props.compteurInitial)

Maintenant, compteur est une variable locale que tu peux modifier sans affecter la prop d’origine. 👍

2. Transformer une prop

Si tu dois transformer la valeur d’une prop :

const props = defineProps(['taille'])// On crée une propriété calculée qui se met à jour si la prop changeconst tailleNormalisee = computed(() => props.taille.trim().toLowerCase())

La propriété calculée tailleNormalisee se mettra automatiquement à jour si la prop taille change ! 🔄

Nommage des props et conventions

En Vue.js, il existe des conventions de nommage pour les props qui peuvent parfois prêter à confusion. Voyons comment tout ça fonctionne :

camelCase vs kebab-case

En JavaScript, on utilise généralement le camelCase (premièreMajuscule) pour les noms de variables et propriétés. C’est aussi le cas pour déclarer les props dans ton code :

defineProps({  nomUtilisateur: String,  compteurInitial: Number})

Mais en HTML, la convention est d’utiliser le kebab-case (mots-avec-tirets). C’est pourquoi, quand tu passes ces props dans un template, tu utilises :

<MonComposant nom-utilisateur='john' compteur-initial='10' />

Vue fait automatiquement la conversion entre les deux ! Par exemple, une prop appelée messageErreur en JavaScript sera accessible via l’attribut message-erreur en HTML. 🔄

C’est une bonne pratique de respecter ces conventions pour que ton code soit cohérent et lisible par d’autres développeurs Vue.

PascalCase pour les composants

Pour les noms de composants, on utilise généralement le PascalCase (TousMots Avec Majuscules) dans le code JavaScript et les templates Vue :

<MonComposant message-accueil='Bonjour' />

Cette convention aide à distinguer visuellement les composants Vue des éléments HTML standard. 👁️

Props et réactivité dans Vue.js

Les props dans Vue.js sont réactives, ce qui signifie que si la valeur d’une prop change dans le composant parent, le composant enfant se met automatiquement à jour. C’est une des fonctionnalités les plus puissantes de Vue ! 🔄

Le système de réactivité de Vue surveille l’utilisation des props basée sur l’accès aux propriétés. Par exemple, quand tu accèdes à props.message dans une propriété calculée ou un watcher, Vue enregistre cette dépendance :

const props = defineProps(['message'])// Cette propriété calculée se mettra à jour quand props.message changeconst messageEnMajuscules = computed(() => props.message.toUpperCase())

Attention lors de la destructuration

Si tu déstructures les props, fais attention car tu pourrais perdre la réactivité :

const props = defineProps(['message'])const { message } = props // ⚠️ message n'est plus réactif dans Vue < 3.5

Dans Vue 3.5 et versions ultérieures, le compilateur transforme automatiquement les accès aux variables déstructurées de defineProps, les rendant réactives. Mais pour les versions antérieures, il vaut mieux accéder aux props directement via l'objet props, ou utiliser toRef/toRefs.

Si tu as besoin de surveiller les changements d'une prop, tu peux utiliser un watcher :

watch(() => props.message, (newValue) => {  console.log(`Le message a changé : ${newValue}`)})

Cette approche garantit que ton watcher sera notifié quand la prop message change ! 👍

Cas concrets d'utilisation des props

Voyons quelques scénarios concrets où les props sont particulièrement utiles :

Composant de carte produit

Imagine que tu crées un composant réutilisable pour afficher des produits dans un site e-commerce :

<script setup>defineProps({  produit: {    type: Object,    required: true,    validator(value) {      return ['id', 'nom', 'prix', 'image'].every(key => key in value)    }  },  enPromo: {    type: Boolean,    default: false  },  devise: {    type: String,    default: '€'  }})</script><template>  <div class='carte-produit' :class='{ promo: enPromo }'>    <img :src='produit.image' :alt='produit.nom' />    <h3>{{ produit.nom }}</h3>    <p class='prix'>{{ produit.prix }} {{ devise }}</p>  </div></template>

Utilisation dans un composant parent :

<CarteProduit   :produit='{ id: 1, nom: 'Smartphone XYZ', prix: 499, image: '/img/smartphone.jpg' }'  :en-promo='true'  devise='$'/>

Composant de pagination

Un composant de pagination qui reçoit le nombre total de pages et la page actuelle :

<script setup>const props = defineProps({  total: {    type: Number,    required: true  },  current: {    type: Number,    default: 1  },  maxVisible: {    type: Number,    default: 5  }})// Logique de calcul des pages à afficher basée sur les propsconst pagesToShow = computed(() => {  // Calcul basé sur total, current et maxVisible  // ...})</script>

Ces exemples montrent comment les props permettent de créer des composants flexibles et réutilisables - l'un des grands avantages de Vue ! 🧩

FAQ sur les props dans Vue.js

Quelle est la différence entre props et data dans Vue ?

Les props sont des données externes passées par un composant parent, tandis que data représente l'état interne géré par le composant lui-même. Les props suivent un flux unidirectionnel (parent vers enfant) et ne doivent pas être modifiées directement, alors que les données peuvent être librement modifiées par le composant.

Comment utiliser des props avec TypeScript dans Vue 3 ?

Avec Vue 3 et TypeScript, tu peux déclarer tes props en utilisant des annotations de type pures dans <script setup> :

<script setup lang='ts'>defineProps<{   titre?: string;   likes?: number }>()</script>

Comment surveiller (watch) les changements d'une prop ?

Tu peux utiliser la fonction watch pour réagir aux changements d'une prop :

watch(() => props.valeur, (nouvelleValeur, ancienneValeur) => {  // Faire quelque chose quand props.valeur change})

Comment définir une valeur par défaut pour une prop ?

Tu peux définir une valeur par défaut dans la déclaration de ta prop :

defineProps({  message: {    type: String,    default: 'Hello World'  }})

Les props peuvent-elles être mutables ?

Non, les props ne doivent pas être modifiées directement. Si tu dois modifier une valeur basée sur une prop, crée une variable locale (avec ref ou reactive) initialisée avec la valeur de la prop, ou utilise une propriété calculée si tu veux que cette valeur reste synchronisée avec la prop.

Comment passer toutes les propriétés d'un objet en tant que props ?

Tu peux utiliser v-bind sans argument pour passer toutes les propriétés d'un objet en tant que props individuelles :

<MonComposant v-bind='monObjet' />

Faut-il utiliser camelCase ou kebab-case pour les props ?

En JavaScript, déclare tes props en camelCase (nomUtilisateur). Lorsque tu les passes dans les templates HTML, utilise le kebab-case (nom-utilisateur). Vue fait automatiquement la conversion entre les deux formats.