Remonter sur deux niveaux

const { createApp, ref } = Vue;

const CarteMini = {
  template: "#modele-carte-mini",
  props: { livre: { type: Object, required: true } },
  emits: ["ajouter"],
  setup(props, { emit }) {
    return { emit };
  },
};

// La liste ne fait que RELAYER l'événement de la carte vers son propre parent.
const ListeLivres = {
  template: "#modele-liste-livres",
  components: { CarteMini },
  props: { livres: { type: Array, required: true } },
  emits: ["ajouter"],
  setup(props, { emit }) {
    return { emit };
  },
};

createApp({
  components: { ListeLivres },
  setup() {
    const livres = [
      { isbn: "9782956300014", titre: "Programmation Java" },
      { isbn: "9782956300052", titre: "Le Petit Prince" },
    ];
    return { livres, panier: ref([]) };
  },
}).mount("#app");

<div id="app">
  <p>Panier : {{ panier.join(", ") || "vide" }}</p>
  <liste-livres :livres="livres" @ajouter="panier.push($event.titre)"></liste-livres>
</div>

<template id="modele-liste-livres">
  <ul>
    <li v-for="livre in livres" :key="livre.isbn">
      <carte-mini :livre="livre" @ajouter="emit('ajouter', $event)"></carte-mini>
    </li>
  </ul>
</template>

Après un clic sur « Ajouter » pour « Le Petit Prince » puis pour « Programmation Java », la première ligne de la page est

Panier : Le Petit Prince, Programmation Java

ListeLivres écoute l'événement de chaque carte et émet aussitôt le sien, avec le même livre. Ce relais est indispensable, car un événement de composant n'atteint que le parent direct ; mais il oblige ListeLivres à connaître un événement dont elle ne fait rien. Avec trois ou quatre niveaux, ce serait pénible : le chapitre 7 montre comment s'en passer.