Что такое teleport

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

Пример:

<template>
  <button @click="showModal = true">Open Modal</button>
  <teleport to="body">
    <div v-if="showModal" class="modal">
      <p>Modal content</p>
      <button @click="showModal = false">Close</button>
    </div>
  </teleport>
</template>

Ключевые моменты:

• Решает проблемы с z-index и overflow
• Сохраняет реактивность и контекст компонента
• Можно указывать любой CSS-селектор в to (например, #modals)