Что такое компонент Teleport?

Question

Accepted Answer

`` отображает markup компонента в **другом месте DOM**, чем где он объявлен в дереве компонентов — но логически остаётся частью компонента (реактивность, props, события по-прежнему работают). ## Проблема, которую он решает Модальные окна, всплывающие подсказки и уведомления часто должны быть **прямым дочерним элементом ``** для избежания проблем с CSS — `overflow: hidden`, `transform` или контекст z-index родительского элемента может обрезать или неправильно располагать модальное окно. Но логически модальное окно принадлежит компоненту, который его вызывает. ## Использование Teleport ```vue ``` Markup модального окна **перемещается** так, чтобы быть дочерним элементом `` в реальном DOM, избегая любых родительских элементов обрезания/наложения — но `open`, `@click` и любые props остаются полностью реактивными, потому что логически это всё ещё часть этого компонента. ## Почему это важно ```text Without Teleport: With Teleport to="body":

... ← clipped/trapped ← free, on top of everything ``` Исчезнув из ловушек предков, модальное окно может надёжно охватывать весь viewport и находиться над всем остальным содержимым с предсказуемым `z-index`. ## Цель может быть любым селектором ```vue ... ... ``` ## Почему это важно Teleport чисто решает классическую проблему CSS с оверлеями (модальными окнами, подсказками, уведомлениями, выпадающими меню), которые обрезаются или неправильно располагаются их DOM-предками. Оно позволяет вам писать оверлей там, где он логически принадлежит (внутри компонента-триггера, с полной реактивностью), при этом отображая его там, где он должен быть в DOM (обычно ``). Это встроенный эквивалент Vue порталов React — стандартный, надёжный способ создавать пользовательский интерфейс оверлеев.