<Teleport> renderer et komponents markup på et andet sted i DOM'en end hvor det er deklareret i dit komponenttræ — mens det logisk set forbliver en del af komponenten (reaktivitet, props, events virker alle stadig).
Modaler, tooltips og notifikationer skal ofte være et for at undgå CSS-problemer — en forælders , eller stakningskontekst kan klippe eller placere en modal forkert. Men logisk set hører modalen til komponenten, der udløser den.
<body>overflow: hiddentransformz-index<template>
<button @click="open = true">Open Modal</button>
<Teleport to="body"> <!-- render this elsewhere... -->
<div v-if="open" class="modal-overlay">
<div class="modal">
<p>I'm declared inside this component...</p>
<p>...but rendered as a child of <body>!</p>
<button @click="open = false">Close</button>
</div>
</div>
</Teleport>
</template>
Modalens markup flyttes til at være et barn af <body> i det rigtige DOM, undgår således evt. begrænsende forældrelement — men open, @click og enhver prop forbliver fuldt reaktiv, fordi det logisk set stadig er en del af denne komponent.
Without Teleport: With Teleport to="body":
<div style="overflow:hidden"> <body>
<div style="transform:..."> ...
<Modal/> ← clipped/trapped <Modal/> ← free, on top of everything
Ved at undgå de begrænsende forældrene kan modalen pålideligt dække hele viewporten og sidde over alt andet indhold med et forudsigeligt z-index.
<Teleport to="#modal-root">...</Teleport> <!-- a specific container -->
<Teleport to="body" :disabled="isMobile">...</Teleport> <!-- conditionally disable -->
Teleport løser rent det klassiske CSS-problem med overlays (modaler, tooltips, toasts, dropdowns), der bliver klippet eller mis-stacket af deres DOM-forfædre.
Det lader dig forfatteren overlayets logiske placering (inde i den udløsende komponent, med fuld reaktivitet) mens du render den, hvor den skal være i DOM'en (normalt <body>).
Det er Vue's indbyggede svarende til React-portaler — den standard, robuste måde at bygge overlay-UI på.