<Teleport> renderöi komponentin merkinnän eri paikkaan DOM:ssa kuin missä se on ilmoitettu komponentin puussa — mutta säilyttää sen loogisesti osana komponenttia (reaktiivisuus, propsit, tapahtumat toimivat silti).
Modaalit, työkaluvihje ja ilmoitukset usein tarvitsevat olla CSS-ongelmien välttämiseksi — vanhemman , tai pinoutumiskonteksti voi leikata tai asettaa modaalin väärin. Mutta loogisesti moداali kuuluu komponentille, joka laukaisee sen.
<body>-elementin suora lapsioverflow: 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>
Modaalin merkintä siirretään olemaan <body>-elementin lapsi todellisessa DOM:ssa, paeten kaikista leikkaavista/pinoutuvista vanhemmista — silti open, @click ja kaikki propsit pysyvät täysin reaktiivisina, koska loogisesti se on silti osa tätä komponenttia.
Without Teleport: With Teleport to="body":
<div style="overflow:hidden"> <body>
<div style="transform:..."> ...
<Modal/> ← clipped/trapped <Modal/> ← free, on top of everything
Paettuaan loukkaavista esivanhemmista moداali voi luotettavasti peittää koko näyttöalueen ja istua kaiken muun sisällön päällä ennakoitavalla z-index-arvolla.
<Teleport to="#modal-root">...</Teleport> <!-- a specific container -->
<Teleport to="body" :disabled="isMobile">...</Teleport> <!-- conditionally disable -->
Teleport ratkaisee siististi klassisen CSS-ongelman, jossa overlay-elementit (modaalit, työkaluvihjeet, toast-ilmoitukset, pudotusvalikot) leikataan tai asetetaan väärin niiden DOM-esivanhempien toimesta.
Sen avulla voit kirjoittaa overlay-elementin sille loogisesti kuuluvassa paikassa (triggerin sisällä olevassa komponentissa, täydellä reaktiivisuudella) samalla kun se renderöidään siihen, missä sen tulee olla DOM:ssa (yleensä <body>).
Se on Vuen sisäänrakennettu vastine React-portaaleille — vakioitunut, vahva tapa rakentaa overlay-käyttöliittymä.