<Teleport> yana jera bayanin component a **wuri daban" duk-daren DOM fiye da inda aka bayyana a jikin bishin component dinku — yayin da ke jiyya a logikal kamar sashi na component ( mabiyayya, props, abubuwan ya kasance aiki duka).
Modals, tooltips, da sanarwa sukan buƙata su kasance don guje wa matsalolin CSS — abokin , , ko canji na uwa zai iya yanke ko baidowa modal sosai. Amma a logikal, modal ya danganta da component da ke sa ita.
<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>
Bayanin modal an motsa shida zai zama jariri na <body> a cikin gaske DOM, tuduwa daga waje duk abokan da ke yanke/saita — duk da haka open, @click, da kuma duk props suke kasance cikakke mabiyayya, saboda a logikal har yanzu sashi ne na wannan component.
Without Teleport: With Teleport to="body":
<div style="overflow:hidden"> <body>
<div style="transform:..."> ...
<Modal/> ← clipped/trapped <Modal/> ← free, on top of everything
Ba tare da damje kumakan da ke kutsare, modal zai iya a kyau rufe duk jimla da zaune sannan duk sauran abubuwan tare da maimaitawa z-index.
<Teleport to="#modal-root">...</Teleport> <!-- a specific container -->
<Teleport to="body" :disabled="isMobile">...</Teleport> <!-- conditionally disable -->
Teleport tsaraka sannu CSS matsala na kashot overlays (modals, tooltips, toasts, dropdowns) da ke yanke ko baidowa matsala ta su DOM kakanninsu.
Yana ba ka izin rubuta overlays inda logicaly ya dama (a gida na da pull component, tare da cikakke mabiyayya) yayin da ke jera inda yasa buƙata a cikin DOM (akali <body>).
Ita ce Vue karata zuwa React portals — sakamako, ingantaccen hanya ne don gina overlay UI.