Što je Teleport komponenta?

Question

Accepted Answer

`` renderira markup komponente na **drugom mjestu u DOM-u** nego gdje je deklariran u vašem stablu komponenti — dok ga logički čuva kao dio komponente (reaktivnost, props, eventi sve i dalje funkcioniraju). ## Problem koji rješava Modali, tooltips i notifikacije često trebaju biti **direktno dijete ``** kako bi se izbjegle CSS greške — parent `overflow: hidden`, `transform` ili `z-index` slaganja kontekst mogu isjeći ili pogrešno slojeviti modal. Ali logički, modal pripada komponenti koja ga pokretima. ## Korištenje Teleport ```vue ``` Markup modala je **pomaknut** da bude dijete od `` u stvarnom DOM-u, izbjegavajući sve roditelje koji isječu/slažu — ipak `open`, `@click` i bilo koji props ostaju potpuno reaktivni, jer logički je i dalje dio ove komponente. ## Zašto "to body" ispravlja greške u rasporedu ```text Without Teleport: With Teleport to="body":

... ← clipped/trapped ← free, on top of everything ``` Izbjegavajući roditeljske elemente koji su zarobljeni, modal može pouzdano pokriti cijeli viewport i sjediti iznad svih ostalih sadržaja s predvidivim `z-index`. ## Cilj može biti bilo koji selektor ```vue ... ... ``` ## Zašto je važno Teleport čisto rješava klasični CSS problem overlaya (modala, tooltips, toastova, padajućih izbornika) koji su isječeni ili pogrešno slojeni od strane njihovih DOM roditelja. Omogućuje vam da napišete overlay gdje logički pripada (unutar komponente koja je pokreće, s punom reaktivnosti) dok ga rendira gdje trebam biti u DOM-u (obično ``). To je Vue-ov ugrađeni ekvivalent React portala — standardni, robustan način za izgradnju overlay korisničkog sučelja.