[VueJS] [Composition API] transmettre et recevoir des données aux composants enfants (enfant <--> parent)

 Avec la Composition API de Vue.js, la gestion des props, des événements et des données suit un modèle différent, plus structuré et modulaire, qui permet de mieux organiser le code dans les composants. Voici les principaux changements pour la gestion des props et des événements avec la Composition API.

---

1. Gestion des props avec la Composition API

Avec Options API :

Dans l’Options API, les props sont définies dans l'objet props, et on y accède directement via this :

export default {
  props: {
    enPromotion: {
      type: Boolean,
      required: true
    }
  },
  template: `<div v-show="enPromotion">🏷️ Produit en promotion !</div>`
};

Avec Composition API :

Les props sont passées en tant qu’argument à la fonction setup(), où elles deviennent des objets réactifs (props).

Code équivalent :

<script setup>
defineProps({
  enPromotion: {
    type: Boolean,
    required: true
  }
});
</script>

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

---

2. Transmission de données via props (parent → enfant)

Le fonctionnement est similaire entre Options API et Composition API. Cependant, avec la Composition API :

• Définir les props est plus explicite grâce à defineProps.
• Le code devient plus lisible et modulaire, car tout est géré dans setup ou via <script setup>.

Exemple complet (Parent → Enfant) :

Composant parent :

<template>
  <product-component :enPromotion="true" />
</template>

Composant enfant :

<script setup>
defineProps({
  enPromotion: Boolean
});
</script>

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

---

3. Gestion des événements avec la Composition API

Avec Options API :

Dans l’Options API, on émet un événement avec this.$emit, et le parent écoute cet événement dans le template :

methods: {
  notifyParent() {
    this.$emit('add-to-cart', this.productId);
  }
}

Avec Composition API :

Les événements sont émis avec la fonction emit, passée en tant qu'argument dans setup.

Code équivalent :

<script setup>
import { defineEmits } from 'vue';

const emit = defineEmits(['add-to-cart']);

function notifyParent(productId) {
  emit('add-to-cart', productId);
}
</script>

<template>
  <button @click="notifyParent(123)">Ajouter au panier</button>
</template>

---

4. Transmission des données avec des événements (enfant → parent)

Avec la Composition API, l'émission d'un événement reste similaire, mais le système est plus clair grâce à defineEmits. On peut également documenter explicitement les événements émis par le composant.

Exemple complet (Enfant → Parent) :

Composant enfant :

<script setup>
defineEmits(['add-to-cart']);

function ajouterProduit(productId) {
  emit('add-to-cart', productId);
}
</script>

<template>
  <button @click="ajouterProduit(123)">Ajouter au panier</button>
</template>

Composant parent :

<template>
  <product-component @add-to-cart="mettreDansPanier" />
</template>

<script setup>
function mettreDansPanier(productId) {
  console.log('Produit ajouté au panier :', productId);
}
</script>

---

5. Avantages de la Composition API

• Meilleure organisation du code : Toutes les fonctionnalités liées à une fonctionnalité (props, événements, données) sont regroupées dans setup, ce qui simplifie les composants complexes.

• Réutilisabilité accrue : Le code peut facilement être déplacé dans des composables (fonctions réutilisables), ce qui améliore la modularité.

• Clarté explicite : Les fonctions comme defineProps et defineEmits documentent directement le contrat entre un composant et ses parents/enfants.

---

En résumé :

Avec la Composition API :

• Les props sont définies avec defineProps et utilisées directement dans le template sans avoir besoin de this.
• Les événements sont gérés avec defineEmits, ce qui rend leur usage plus explicite et documenté.
• Le code est plus structuré et réutilisable, particulièrement utile pour les projets complexes. https://fr.vuejs.org/api/sfc-script-setup#defineprops-defineemits