1. Transmission descendante via Props

L'utilisation des props est la méthode fondamentale pour envoyer des données d'un composant parent vers un composant enfant. Le parent définit un attribut sur la balise de l'enfant, et l'enfent déclare cet attribut dans son option props.

// Composant Parent (App.vue)
<template>
  <div>
    <ProductDisplay :itemName="currentProduct" />
  </div>
</template>

<script>
import ProductDisplay from "./components/ProductDisplay.vue";
export default {
  components: { ProductDisplay },
  data() {
    return {
      currentProduct: "Ordinateur Portable"
    };
  }
};
</script>

// Composant Enfant (ProductDisplay.vue)
<template>
  <section>
    <h2>Produit : {{ itemName }}</h2>
  </section>
</template>

<script>
export default {
  props: {
    itemName: String
  }
};
</script>

2. Communication ascendante via $emit

Pour envoyer des informations vers le haut (de l'enfant vers le parent), on utilise les événements personnalisés. L'enfant déclenche $emit('nom-evenement', donnee) et le parent écoute cet événement via v-on ou @.

// Composant Enfant
<template>
  <button @click="notifierParent">Valider l'achat</button>
</template>

<script>
export default {
  methods: {
    notifierParent() {
      this.$emit('update-status', { id: 101, status: 'payé' });
    }
  }
};
</script>

// Composant Parent
<template>
  <ProductDisplay @update-status="gererChangement" />
</template>

<script>
export default {
  methods: {
    gererChangement(data) {
      console.log("Statut mis à jour :", data.status);
    }
  }
};
</script>

3. Le bus d'événements (EventBus)

Pour faire communiquer des composants "frères" ou sans lien direct dans Vue 2, on peut utiliser une instance Vue vide comme médiateur.

// eventBus.js
import Vue from 'vue';
export const EventBus = new Vue();

// Composant émetteur
import { EventBus } from './eventBus.js';
EventBus.$emit('globalAlert', 'Message important');

// Composant récepteur
import { EventBus } from './eventBus.js';
mounted() {
  EventBus.$on('globalAlert', (msg) => {
    console.log("Alerte reçue :", msg);
  });
}

4. Accès direct via $refs

Le parent peut accéder directement à l'instance d'un composant enfant en utilisant l'attribut ref. Cela permet d'appeler des méthodes internes de l'enfant ou de lire ses données.

// Parent
<template>
  <div>
    <ModalWindow ref="maModale" />
    <button @click="ouvrir">Ouvrir la modale</button>
  </div>
</template>

<script>
export default {
  methods: {
    ouvrir() {
      this.$refs.maModale.show(); // Appel direct d'une méthode de l'enfant
    }
  }
};
</script>

5. Utilisation de $parent et $children

Bien que moins recommandé pour la maintenabilité, un enfant peut accéder à l'instance de son parent via this.$parent.

// Dans l'enfant
methods: {
  accederDonneeParent() {
    console.log(this.$parent.titreSite);
    this.$parent.maMethodeParent();
  }
}

6. Gestion d'état centralisée avec Vuex

Pour les applications complexes, Vuex offre un magasin (store) unique accessible par tous les composants.

// store.js
export default new Vuex.Store({
  state: { count: 0 },
  mutations: {
    increment(state) { state.count++ }
  }
});

// Dans n'importe quel composant
computed: {
  total() { return this.$store.state.count; }
},
methods: {
  ajouter() { this.$store.commit('increment'); }
}

7. Injection de dépendances (Provide / Inject)

Cette méthode permet à un composant ancêtre de fournir des données à tous ses descendants, peu importe la profondeur de l'arborescence.

// Ancêtre
provide() {
  return {
    themeConfig: { color: 'dark' }
  };
}

// Descendant lointain
inject: ['themeConfig'],
created() {
  console.log(this.themeConfig.color);
}

8. Transmistion par $attrs et $listeners

$attrs contient les attributs non déclarés comme props, et $listeners contient les écouteurs d'événements. C'est idéal pour créer des composants "transparents" (warppers).

// Composant intermédiaire
<template>
  <div class="wrapper">
    <BaseInput v-bind="$attrs" v-on="$listeners" />
  </div>
</template>

9. Passage de données via Vue Router

Le routage permet également de transférer des informations lors de la navigation.

A. Utilisation de Query (dans l'URL)

// Navigation
this.$router.push({ path: '/search', query: { q: 'vuejs' } });

// Récupération
console.log(this.$route.query.q);

B. Utilisation de Params

// Navigation (nécessite un nom de route)
this.$router.push({ name: 'profile', params: { userId: 42 } });

// Récupération
console.log(this.$route.params.userId);