Supprimer le relais

<script setup>
import { provide, ref } from "vue";
import ListeLivres from "./ListeLivres.vue";
import { cleAjouter } from "./cles.js";

const LIVRES = [
  { isbn: "9782956300014", titre: "Programmation Java" },
  { isbn: "9782956300052", titre: "Le Petit Prince" },
];
const panier = ref([]);
provide(cleAjouter, (livre) => panier.value.push(livre.titre));
</script>

<template>
  <p>Panier : {{ panier.join(", ") || "vide" }}</p>
  <ListeLivres :livres="LIVRES" />
</template>

<script setup>
import CarteMini from "./CarteMini.vue";

// Plus de relais : la liste ne connaît même plus l'événement « ajouter ».
defineProps({ livres: { type: Array, required: true } });
</script>

<template>
  <ul>
    <li
      v-for="livre in livres"
      :key="livre.isbn"
    >
      <CarteMini :livre="livre" />
    </li>
  </ul>
</template>

<script setup>
import { inject } from "vue";
import { cleAjouter } from "./cles.js";

defineProps({ livre: { type: Object, required: true } });
const ajouter = inject(cleAjouter);
</script>

<template>
  <span>{{ livre.titre }}</span>
  <button
    type="button"
    @click="ajouter(livre)"
  >
    Ajouter
  </button>
</template>

Après un clic sur « Ajouter » pour « Le Petit Prince » puis pour « Programmation Java » :

Panier : Le Petit Prince, Programmation Java