Was ist die Teleport-Komponente?

Question

Accepted Answer

`` rendert das Markup einer Komponente an einer **anderen Stelle im DOM**, als wo sie in deinem Komponentenbaum deklariert ist – während sie logisch Teil der Komponente bleibt (Reaktivität, Props, Events funktionieren alle noch). ## Das Problem, das sie löst Modale, Tooltips und Benachrichtigungen müssen oft ein **direktes Kind von ``** sein, um CSS-Probleme zu vermeiden – der `overflow: hidden`, `transform` oder `z-index` Stacking Context eines Elternteils kann ein Modal clippen oder fehlerhaft überlagern. Aber logisch gehört das Modal zu der Komponente, die es auslöst. ## Teleport verwenden ```vue ``` Das Modal-Markup wird **verschoben**, um ein Kind von `` im echten DOM zu sein, und entgeht damit clippenden/stackenden Elternteilen – aber `open`, `@click` und alle Props bleiben vollständig reaktiv, weil es logisch immer noch Teil dieser Komponente ist. ## Warum "to body" Layout-Bugs behebt ```text Without Teleport: With Teleport to="body":

... ← clipped/trapped ← free, on top of everything ``` Durch das Entkommen aus den trappenden Vorfahren kann das Modal zuverlässig den gesamten Viewport abdecken und mit einem vorhersehbaren `z-index` über allen anderen Inhalten sitzen. ## Das Ziel kann jeder Selector sein ```vue ... ... ``` ## Warum es wichtig ist Teleport löst sauber das klassische CSS-Problem von Overlays (Modale, Tooltips, Toasts, Dropdowns), die von ihren DOM-Vorfahren geclippt oder fehlerhaft überlagert werden. Es lässt dich das Overlay dort schreiben, wo es logisch hingehört (innerhalb der auslösenden Komponente mit voller Reaktivität), während es dort rendert, wo es im DOM sein muss (normalerweise ``). Es ist Vues eingebautes Äquivalent zu React Portals – die standardisierte, robuste Art, Overlay-UI zu bauen.