Ce este componenta Teleport?

Question

Accepted Answer

`` redă markup-ul unei componente într-un **loc diferit în DOM** decât unde este declarată în arborele tău de componente — dar o păstrează logic ca parte a componentei (reactivitate, props, evenimente funcționează în continuare). ## Problema pe care îl rezolvă Modale, tooltips și notificări adesea trebuie să fie un **copil direct al ``** pentru a evita problemele CSS — `overflow: hidden`, `transform` sau contextul de stivuire `z-index` al unui părinte poate tăia sau poziția greșit un modal. Dar logic, modalul aparține componentei care îl declanșează. ## Utilizarea Teleport ```vue ``` Markup-ul modalului este **mutat** pentru a fi un copil al `` în DOM-ul real, scăpând de orice tăiere/stivuire a părinților — totuși `open`, `@click` și orice props rămân pe deplin reactive, deoarece logic face parte din această componentă. ## De ce "to body" remediază bug-urile de layout ```text Without Teleport: With Teleport to="body":

... ← clipped/trapped ← free, on top of everything ``` Prin scaparea strămoșilor captivi, modalul poate acoperi de încredere întreaga fereastră de vizionare și stă deasupra oricărui alt conținut cu un `z-index` previzibil. ## Ținta poate fi orice selector ```vue ... ... ``` ## De ce este important Teleport rezolvă curat problema CSS clasică a suprapunerilor (modales, tooltips, toasts, dropdowns) fiind tăiate sau prost stivuite de strămoșii lor DOM. Îți permite să creezi suprapunerea unde logic aparține (în interiorul componentei care o declanșează, cu reactivitate deplină) în timp ce o redezi unde trebuie să fie în DOM (de obicei ``). Este echivalentul încorporat al Vue al portalurilor React — modul standard, robust de a construi UI de suprapunere.