Mi a Teleport komponens?

Question

Accepted Answer

A `` egy komponens jelöléseit egy **másik helyen jeleníti meg a DOM-ban**, mint ahol a komponensfájában deklarálták — miközben logikailag a komponens részét tartja (reaktivitás, props, eseményesek még mindig működnek). ## Az a probléma, amit megold A modálok, tooltipek és értesítések gyakran a **`` közvetlen gyermeke** kell legyenek, hogy elkerüljék a CSS-problémákat — a szülő `overflow: hidden`, `transform` vagy `z-index` rétegzési kontextusa levághatja vagy helytelenül rétegezhet egy modált. De logikailag a modál ahhoz a komponenshez tartozik, amely aktiválja. ## A Teleport használata ```vue ``` A modális jelölés **áthelyeződik**, hogy a valós DOM-ban a `` gyermeke legyen, amely elkerül minden levágó/rétegzési szülőt — azonban `open`, `@click` és bármely props teljesen reaktív marad, mivel logikailag még mindig ennek a komponensnek a része. ## Miért javítja a "to body" az elrendezési hibákat ```text Without Teleport: With Teleport to="body":

... ← clipped/trapped ← free, on top of everything ``` Az elcsapott ősöktől elmenekülve a modál megbízhatóan le tudja takarni az egész viewport-ot, és egy előrejelezhető `z-index` segítségével az összes többi tartalom felett ül. ## A cél bármely szelektálható lehet ```vue ... ... ``` ## Miért fontos A Teleport tisztán megoldja az átfedések (modálok, tooltipek, toast-ok, legördülő menük) klasszikus CSS-problémáját, amelyeket DOM-szüleik levágnak vagy helytelenül rétegeznek. Lehetővé teszi, hogy az átfedéseket ott szerkeszd, ahová logikailag tartoznak (az azt aktiváló komponensen belül, teljes reaktivitással), miközben ott rendereli, ahol szükségesek a DOM-ban (általában ``). Ez a Vue beépített React portálok egyenértékese — az átfedés felhasználói felület felépítésének szabványos, robusztus módja.