Vad är Teleport-komponenten?

Question

Accepted Answer

`` renderar en komponents märkspråk på **en annan plats i DOM** än där den deklareras i ditt komponentträd — men förblir logiskt del av komponenten (reaktivitet, props, events fungerar alla fortfarande). ## Problemet det löser Modaler, tooltips och aviseringar behöver ofta vara **direkt barn till ``** för att undvika CSS-problem — en förälders `overflow: hidden`, `transform` eller `z-index` stacking context kan klippa eller felplacera en modal. Men logiskt sett tillhör modalen komponenten som utlöser den. ## Använda Teleport ```vue ``` Modalens märkspråk **flyttas** för att bli ett barn till `` i den verkliga DOM, och undviker alla klippande/stackande föräldrar — men `open`, `@click` och alla props förblir fullt reaktiva, eftersom det logiskt sett fortfarande är del av denna komponent. ## Varför "to body" fixar layoutfel ```text Without Teleport: With Teleport to="body":

... ← clipped/trapped ← free, on top of everything ``` Genom att undvika fällande förfäder kan modalen på ett tillförlitligt sätt täcka hela viewporten och sitta ovanför allt annat innehål med ett förutsägbart `z-index`. ## Målet kan vara vilken väljare som helst ```vue ... ... ``` ## Varför det är viktigt Teleport löser på ett elegant sätt det klassiska CSS-problemet med överlagringar (modaler, tooltips, toasts, listrutor) som klipps eller felstackas av deras DOM-förfäder. Det låter dig skriva överlagringen där den logiskt sett hör hemma (inuti den utlösande komponenten, med full reaktivitet) medan du renderar den där den behöver vara i DOM:en (vanligtvis ``). Det är Vues inbyggda motsvarighet till React-portaler — det standard, robusta sättet att bygga överlagring-UI.