Qu'est-ce que le composant Teleport ?

Question

Accepted Answer

`` affiche le balisage d'un composant à un **endroit différent du DOM** que celui où il est déclaré dans votre arborescence de composants — tout en le gardant logiquement comme partie du composant (la réactivité, les props, les événements fonctionnent tous toujours). ## Le problème qu'il résout Les modales, info-bulles et notifications doivent souvent être un **enfant direct de ``** pour éviter les problèmes CSS — le `overflow: hidden`, la `transform`, ou le contexte d'empilement `z-index` d'un parent peuvent rogner ou mal superposer une modale. Mais logiquement, la modale appartient au composant qui la déclenche. ## Utiliser Teleport ```vue ``` Le balisage de la modale est **déplacé** pour devenir un enfant de `` dans le vrai DOM, échappant à tout parent qui rogne ou qui empile — pourtant `open`, `@click` et toute prop restent entièrement réactifs, car logiquement c'est toujours part de ce composant. ## Pourquoi "to body" corrige les bugs de mise en page ```text Without Teleport: With Teleport to="body":

... ← clipped/trapped ← free, on top of everything ``` En échappant aux ancêtres qui enferment, la modale peut couvrir de manière fiable tout le viewport et se situer au-dessus de tout autre contenu avec un `z-index` prévisible. ## La cible peut être n'importe quel sélecteur ```vue ... ... ``` ## Pourquoi c'est important Teleport résout proprement le problème CSS classique des superpositions (modales, info-bulles, toasts, menus déroulants) qui sont rognées ou mal empilées par leurs ancêtres du DOM. Cela vous permet de créer la superposition où elle appartient logiquement (à l'intérieur du composant qui la déclenche, avec réactivité complète) tout en l'affichant où elle doit être dans le DOM (généralement ``). C'est l'équivalent intégré de Vue pour les React portals — la façon standard et robuste de construire une interface utilisateur en superposition.