Che cos'è il componente Teleport?

Question

Accepted Answer

`` renderizza il markup di un componente in un **posto diverso nel DOM** rispetto a dove è dichiarato nel tuo albero dei componenti — mantenendolo logicamente parte del componente (reattività, props, eventi continuano a funzionare). ## Perché è importante Modali, tooltip e notifiche spesso devono essere un **figlio diretto di ``** per evitare problemi CSS — l'`overflow: hidden`, `transform`, o il contesto di stacking `z-index` di un genitore può tagliare o mal-stratificare una modale. Ma logicamente, la modale appartiene al componente che la attiva. ## Usare Teleport ```vue ``` Il markup della modale è **spostato** per essere un figlio di `` nel DOM reale, sfuggendo a qualsiasi genitore di taglio/stacking — eppure `open`, `@click` e qualsiasi prop rimangono completamente reattivi, perché logicamente fa ancora parte di questo componente. ## Perché "to body" corregge i bug di layout ```text Without Teleport: With Teleport to="body":

... ← clipped/trapped ← free, on top of everything ``` Sfuggendo gli antenati intrappolatori, la modale può coprire in modo affidabile l'intero viewport e stare sopra tutti gli altri contenuti con uno `z-index` prevedibile. ## Il target può essere un qualsiasi selettore ```vue ... ... ``` ## Perché è importante Teleport risolve in modo pulito il problema CSS classico degli overlay (modali, tooltip, toast, dropdown) che vengono tagliati o mal-stratificati dai loro antenati nel DOM. Ti consente di scrivere l'overlay dove logicamente appartiene (dentro il componente che lo attiva, con piena reattività) mentre lo renderizza dove ha bisogno di essere nel DOM (solitamente ``). È l'equivalente Vue built-in dei portali React — il modo standard e robusto per costruire l'UI degli overlay.