Teleport component ਕੀ ਹੈ?

Question

Accepted Answer

`` ਇੱਕ component ਦੇ markup ਨੂੰ **DOM ਵਿੱਚ ਇੱਕ ਵੱਖਰੀ ਜਗ੍ਹਾ ਉੱਤੇ** render ਕਰਦਾ ਹੈ ਜਿਸ ਥਾਂ ਤੇ ਇਹ ਤੁਹਾਡੇ component tree ਵਿੱਚ declared ਹੈ — ਪਰ ਇਸਨੂੰ logically component ਦਾ ਹਿੱਸਾ ਰੱਖਦਾ ਹੈ (reactivity, props, events ਸਭ ਕਾਰਜ ਕਰਦੇ ਹਨ)। ## ਸਮੱਸਿਆ ਜਿਸਨੂੰ ਇਹ ਹੱਲ ਕਰਦਾ ਹੈ Modals, tooltips, ਅਤੇ notifications ਨੂੰ ਅਕਸਰ CSS ਮੁਸੀਬਤਾਂ ਤੋਂ ਬਚਣ ਲਈ **`` ਦਾ direct child** ਹੋਣਾ ਜ਼ਰੂਰੀ ਹੈ — ਪੈਰੈਂਟ ਦਾ `overflow: hidden`, `transform`, ਜਾਂ `z-index` stacking context ਇੱਕ modal ਨੂੰ clip ਜਾਂ ਗਲਤ-ਲੇਅਰ ਕਰ ਸਕਦਾ ਹੈ। ਪਰ logically, modal ਉਸ component ਨਾਲ ਸਬੰਧਤ ਹੈ ਜਿਹੜਾ ਇਸਨੂੰ trigger ਕਰਦਾ ਹੈ। ## Teleport ਦੀ ਵਰਤੋਂ ```vue ``` Modal markup ਨੂੰ **ਮਨਤਵੀ ਕੀਤਾ** ਜਾਂਦਾ ਹੈ real DOM ਵਿੱਚ `` ਦਾ child ਬਣਨ ਲਈ, ਕਿਸੇ ਵੀ clipping/stacking parents ਤੋਂ ਬਚਦਾ ਹੈ — ਫਿਰ ਵੀ `open`, `@click`, ਅਤੇ ਕੋਈ ਵੀ props ਪੂਰੀ ਤਰ੍ਹਾਂ reactive ਰਹਿੰਦੇ ਹਨ, ਕਿਉਂਕਿ logically ਇਹ ਅਜੇ ਵੀ ਇਸ component ਦਾ ਹਿੱਸਾ ਹੈ। ## ਕਿਉਂ "to body" layout bugs ਨੂੰ ਠੀਕ ਕਰਦਾ ਹੈ ```text Without Teleport: With Teleport to="body":

... ← clipped/trapped ← free, on top of everything ``` Trapping ancestors ਤੋਂ ਬਚ ਕੇ, modal ਭਰੋਸੇ ਨਾਲ ਪੂਰੀ viewport ਨੂੰ ਕਵਰ ਕਰ ਸਕਦਾ ਹੈ ਅਤੇ ਇੱਕ predictable `z-index` ਨਾਲ ਸਾਰੀ ਹੋਰ ਸਮੱਗ੍ਰੀ ਦੇ ਉੱਪਰ ਬੈਠ ਸਕਦਾ ਹੈ। ## Target ਕੋਈ ਵੀ selector ਹੋ ਸਕਦਾ ਹੈ ```vue ... ... ``` ## ਕਿਉਂ ਇਹ ਮਾਇਨੇ ਰੱਖਦਾ ਹੈ Teleport ਸਾਫ਼ ਤਰੀਕੇ ਨਾਲ overlays (modals, tooltips, toasts, dropdowns) ਦੀ ਕਲਾਸਿਕ CSS ਸਮੱਸਿਆ ਨੂੰ ਹੱਲ ਕਰਦਾ ਹੈ ਜੋ ਉਹਨਾਂ ਦੇ DOM ancestors ਦੁਆਰਾ clip ਜਾਂ mis-stacked ਹੋ ਜਾਂਦੇ ਹਨ। ਇਹ ਤੁਹਾਨੂੰ overlay ਨੂੰ ਉੱਥੇ ਲਿਖਣ ਦਿੰਦਾ ਹੈ ਜਿੱਥੇ ਇਹ logically ਸਬੰਧਤ ਹੈ (triggering component ਦੇ ਅੰਦਰ, ਪੂਰੀ reactivity ਨਾਲ) ਜਦਕਿ ਇਸਨੂੰ DOM ਵਿੱਚ ਉੱਥੇ render ਕਰਦਾ ਹੈ ਜਿੱਥੇ ਇਸਦੀ ਜ਼ਰੂਰਤ ਹੈ (ਆਮ ਤੌਰ ਉੱਤੇ ``)। ਇਹ Vue ਦਾ React portals ਦਾ built-in equivalent ਹੈ — overlay UI ਬਣਾਉਣ ਦਾ standard, robust ਤਰੀਕਾ।