Une notification téléportée — exercice corrigé de Vue : construire une application web (école d'ingénieur) (chapitre 7)

Une notification téléportée

Communication entre composants · niveau 2

Énoncé

La page contient, hors de #app, un conteneur :


<div id="notifications" aria-live="polite"></div>

Écrire un composant AvisNotification qui affiche un message et un bouton « Fermer » dans ce conteneur, quel que soit l'endroit où il est utilisé. L'utiliser dans une carte de livre, après un clic sur « Ajouter au panier ». Où le message se trouve-t-il dans le DOM ?

Corrigé


<script setup>
// Rendu dans #notifications (hors de #app), quel que soit l'endroit où le composant est utilisé
defineProps({ message: { type: String, required: true } });
const emit = defineEmits(["fermer"]);
</script>

<template>
  <Teleport to="#notifications">
    <p class="notification">
      {{ message }}
      <button
        type="button"
        @click="emit('fermer')"
      >
        Fermer
      </button>
    </p>
  </Teleport>
</template>

Après un clic sur « Ajouter au panier », le corps de la page est


<div id="app" data-v-app="">
<section class="carte">
<h2>Programmation Java</h2>
<button type="button"> Ajouter au panier </button>
<!--teleport start-->
<!--teleport end-->
</section>
</div>
  <div id="notifications" aria-live="polite">
<p class="notification">« Programmation Java » ajouté au panier. <button type="button"> Fermer </button>
</p>
</div>

Le message est dans #notifications, hors de #app ; à sa place, dans la carte, Vue n'a laissé que deux commentaires qui marquent le début et la fin de la téléportation. Après « Fermer », le conteneur est vide. Comme le conteneur porte aria-live, le message est annoncé par les lecteurs d'écran. La cible doit exister quand le composant est monté : ici, elle est écrite dans la page HTML.