<Teleport> gjengir en komponents oppmerking på et annet sted i DOM-en enn der den er deklarert i komponenttreet ditt — men beholder den logisk som en del av komponenten (reaktivitet, props, hendelser fungerer alle fortsatt).
Modaler, tooltips og meldinger må ofte være et for å unngå CSS-problemer — en forelder , eller stacking context kan klippe eller feillagre en modal. Men logisk sett tilhører modalen komponenten som utlø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>
Modaloppmerkningen blir flyttet til å være et barn av <body> i den virkelige DOM-en, og unnslipper enhver klipping/stabling fra foreldre — likevel forblir open, @click og alle props fullt reaktive, fordi logisk sett er det fortsatt en del av denne komponenten.
Without Teleport: With Teleport to="body":
<div style="overflow:hidden"> <body>
<div style="transform:..."> ...
<Modal/> ← clipped/trapped <Modal/> ← free, on top of everything
Ved å unnslippe de fangede forfedrene, kan modalen pålitelig dekke hele visningsvinduet og sitte over alt annet innhold med en forutsigbar z-index.
<Teleport to="#modal-root">...</Teleport> <!-- a specific container -->
<Teleport to="body" :disabled="isMobile">...</Teleport> <!-- conditionally disable -->
Teleport løser på en ryddig måte det klassiske CSS-problemet med overlegg (modaler, tooltips, toaster, rullegardinmenyer) som blir klippet eller feillagret av deres DOM-forfedre.
Det lar deg skrive overlegget der det logisk hører hjemme (inne i den utløsende komponenten, med full reaktivitet) mens du gjengir det der det må være i DOM-en (vanligvis <body>).
Det er Vues innebygde ekvivalent av React portals — standardmåten, robust måte å bygge overlay-brukergrensesnitt på.