[VueJs] Transmettre des données aux composants enfants avec les props

Comment un composant parent peut transmettre des données à un composant enfant grâce aux props, en utilisant une propriété indiquant si un produit est en promotion.

---

1. Problème initial :

• L'application est composée de deux composants principaux :
  • Composant Parent : Gère l'ensemble de la page et contient des données globales comme celles liées au panier.
  • Composant Enfant : Affiche les détails du produit, comme sa description ou des badges spécifiques.
• Le composant enfant ne peut pas accéder directement aux données du parent.

---

2. Solution : Utiliser des props :

• Les props permettent au composant parent de transmettre des données spécifiques à son enfant.

---

3. Étapes pour utiliser les props :

a) Déclarer une donnée dans le parent :

• Dans le composant parent, on crée une donnée enPromotionProduct qui indique si le produit est en promotion.

data() {
    return {
        enPromotionProduct: true // Par défaut, le produit est en promotion
    };
}

b) Passer cette donnée au composant enfant :

• Dans le template du parent, on transmet la donnée via un attribut personnalisé :
• <product-component :enPromotion="enPromotionProduct"></product-component>

c) Déclarer et utiliser la prop dans l'enfant :

1. Déclarer la prop dans le composant enfant pour qu'il puisse recevoir et utiliser cette donnée :

   props: {
       enPromotion: {
           type: Boolean, // La prop doit être de type booléen
           required: true // Cette prop est obligatoire
       }
   }
   

2. Utiliser la prop dans le template du composant enfant. Par exemple, afficher un badge "Promotion" si la prop est vraie :

   <div v-show="enPromotion" class="promotion-badge">
       🏷️ Produit en promotion !
   </div>
   

---

4. Résultat final :

• Lorsque la donnée enPromotionProduct dans le parent est true, un badge "🏷️ Produit en promotion !" s'affiche dans le composant enfant.
• Si cette donnée est modifiée dans le parent (par exemple, false), le composant enfant met automatiquement à jour son rendu, et le badge disparaît.

---

Points importants :

1. Unidirectionnalité : Les props permettent un flux de données clair du parent → enfant.
2. Validation des props : On peut préciser le type, rendre la prop obligatoire, ou même définir des valeurs par défaut.
3. Dynamisme : Toute modification de la donnée dans le parent se répercute automatiquement sur l’enfant.

---

Avantages de l'exemple enPromotion :

Cet exemple montre clairement comment un composant parent peut contrôler le rendu du composant enfant de manière conditionnelle. Cela illustre aussi un cas d'usage réaliste pour des sites e-commerce, où des informations comme l'état de promotion d'un produit sont essentielles.