Wat is het Teleport component?

Question

Accepted Answer

`` geeft de markup van een component weer op een **ander plaats in de DOM** dan waar het in je component tree is gedeclareerd — maar houdt het logisch onderdeel van de component (reactivity, props, events werken allemaal nog steeds). ## Waarom het belangrijk is Modalen, tooltips en meldingen moeten vaak een **directe child van ``** zijn om CSS-problemen te vermijden — de `overflow: hidden`, `transform` of `z-index` stacking context van een parent kan een modaal afknippen of verkeerd stapelen. Maar logisch gezien hoort het modaal bij de component die het activeert. ## Teleport gebruiken ```vue ``` De modaalmarkup wordt **verplaatst** naar een child van `` in de echte DOM, ontsnapt aan alle afknipping/stapeling van parents — toch blijven `open`, `@click` en alle props volledig reactief, omdat logisch gezien het nog steeds onderdeel is van deze component. ## Waarom "to body" layoutbugs oplost ```text Without Teleport: With Teleport to="body":

... ← clipped/trapped ← free, on top of everything ``` Door aan de insluiting van ancestors te ontsnappen, kan het modaal betrouwbaar het hele viewport bedekken en met een voorspelbare `z-index` boven alle andere inhoud zitten. ## Het target kan elke selector zijn ```vue ... ... ``` ## Waarom het belangrijk is Teleport lost schoon het klassieke CSS-probleem van overlays (modalen, tooltips, toasts, dropdowns) op die worden afgekapt of verkeerd gestapeld door hun DOM-ancestors. Het laat je de overlay daar schrijven waar het logisch hoort (in de triggering component, met volledige reactivity) terwijl je het daar in de DOM rendert waar het nodig is (meestal ``). Het is Vue's ingebouwde equivalent van React portals — de standaard, robuuste manier om overlay-UI te bouwen.