Что такое Teleport во Vue 3 и как он используется?

Teleport во Vue 3 — это специальный компонент, который позволяет рендерить дочерние элементы в другом месте DOM, отличном от места расположения самого компонента в иерархии Vue.

Это полезно, например, для модальных окон, тултипов или всплывающих меню, которые логически принадлежат одному компоненту, но должны визуально отображаться в другом месте, например, в корне документа.

Пример использования:

<template>
  <teleport to="body">
    <div class="modal">
      Это модальное окно, отрендеренное в body
    </div>
  </teleport>
</template>

Здесь содержимое внутри <teleport> будет вставлено в элемент body, а не в текущий родительский элемент компонента.