<Teleport> jirrinderaw il-markup ta' komponent f'post differenti fil-DOM minn fejn huwa ddikjarat fil-wiċċ tal-komponenti tiegħek — filwaqt li jibqa' loġikament parti tal-komponent (reattività, props, avvenimenti kollha xorta jaħdmu).
Modali, tooltips, u notifikazzjonijiet ħafna drabi jeħtieġu jkunu biex iġibdu ċ-ċwar CSS — , , jew stacking context tal-ħamiema jista' jqatta' jew jħalwel modal. Imma loġikalment, il-modal tappartjeni lill-komponent li jattivah.
<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>
Il-markup tal-modal huwa mitmugħ biex ikun iben ta' <body> fid-DOM reali, uħ li jitkella jew stacking ħamiem — imma open, @click, u xi props jibqgħu pjentament reattivi, għaliex loġikalment xorta parti ta' dan il-komponent.
Without Teleport: With Teleport to="body":
<div style="overflow:hidden"> <body>
<div style="transform:..."> ...
<Modal/> ← clipped/trapped <Modal/> ← free, on top of everything
Billi tuħ mill-ħamiem li jilqgħu, il-modal jista' affidabilment jgħatti l-viewport kollu u jkun fuq ikoll il-kontenut ieħor b'z-index prevedibli.
<Teleport to="#modal-root">...</Teleport> <!-- a specific container -->
<Teleport to="body" :disabled="isMobile">...</Teleport> <!-- conditionally disable -->
Teleport b'mod net isolvi l-problema CSS klassika ta' overlays (modali, tooltips, toasts, dropdowns) li jitqattgħu jew jitkemmxu ħażin mill-ħamiem tiegħom fid-DOM.
Igħallmu żid il-overlay fejn loġikalment jappartjeni (ġewwa l-komponent li jattivah, b'reattività completa) filwaqt li jirrinderah fejn jeħtieġ ikun fid-DOM (normalment <body>).
Dan huwa l-ekwivalent ta' Vue ta' portals React — il-mod standard u robustu biex tinbena overlay UI.