Komponenti ya Teleport ni nini?

Question

Accepted Answer

`` hutengeneza markup ya komponenti katika **mahali tofauti katika DOM** kuliko ambapo imechukuliwa katika mti wa komponenti yako — lakini inabaki kimantikilogi kuwa sehemu ya komponenti (reaktibiti, props, matukio yote bado hufanya kazi). ## Tatizo linalosuluhisha Modals, tooltips na arifa mara nyingi zinahitaji kuwa **watoto wa moja kwa moja wa ``** ili kuepuka matatizo ya CSS — `overflow: hidden`, `transform`, au `z-index` stacking context ya mzazi inaweza kukata au kuweka modal vibaya. Lakini kimantikilogi, modal ni ya komponenti inayoitaji. ## Kutumia Teleport ```vue ``` Markup ya modal **inasogezwa** ili kuwa mtoto wa `` katika DOM halisi, ikikataa wazazi wowote wa kukatia/kuandaa — lakini `open`, `@click`, na props zote zinabaki zikiwa na juu zaidi ya reaktibiti, kwa sababu kimantikilogi bado ni sehemu ya komponenti hii. ## Kwa nini "kwa body" kurekebisha matatizo ya muundo ```text Without Teleport: With Teleport to="body":

... ← clipped/trapped ← free, on top of everything ``` Kwa kukataa wazazi wenye mtego, modal inaweza kufa kwa maadhimisho kutengeneza viewport nzima na kukaa juu ya maudhui mengine yote kwa `z-index` inayotarajiwa. ## Lengo inaweza kuwa kichagua chochote ```vue ... ... ``` ## Kwa nini ni muhimu Teleport husuluhisha kwa urahisi tatizo la CSS la jadi la overlays (modals, tooltips, toasts, dropdowns) kukatwa au kuweka vibaya na wazazi wao wa DOM. Inakuruhusu kuandika overlay mahali inalobadilishwa kimantikilogi (ndani ya komponenti inayoitaja, na reaktibiti kamili) wakati ukiruhusu mahali ambapo inahitaji kuwa katika DOM (kawaida ``). Ini ni eneo lililopandikwa la Vue kwa React portals — njia ya kawaida, imara ya kujenga UI ya overlay.