Какво са телепорти във Vue?

Teleport във Vue 3 е начин за рендериране на съдържанието на компонент на друго място в DOM дървото, без да е свързано с физическото му местоположение в йерархията.

Това е полезно за:

Модални прозорци и изскачащи прозорци: Позволява лесно преместване на модален прозорец или изскачащо уведомление към кореновите елементи <body> или <html>, като се избягват проблеми с z-index и изрязване от родителските елементи.
Повторно използваеми компоненти: Позволява създаването на компоненти, които могат да рендерират част от съдържанието си на различни места, като запазват логиката си в един компонент.

Синтаксис за използване на <Teleport>:

<template>
  <div>
    <!-- Основно съдържание на компонента -->
    <button @click="showModal = true">Отвори модал</button>

    <!-- Съдържание на модала, телепортирано към #modal-target -->
    <Teleport to="#modal-target">
      <div class="modal-overlay" v-if="showModal">
        <div class="modal-content">
          <h2>Заглавие на модала</h2>
          <p>Текст на модала.</p>
          <button @click="showModal = false">Затвори</button>
        </div>
      </div>
    </Teleport>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const showModal = ref(false);
</script>

<style scoped>
/* Стилове за компонента */
</style>

Атрибутът to указва целевия контейнер в DOM, към който ще бъде преместено съдържанието на <Teleport>. Целта може да бъде:

Стринг с CSS селектор (например, #modal-target, .container).
DOM елемент (получен чрез document.getElementById() или document.querySelector()).

Ако целевият контейнер не бъде намерен, съдържанието няма да бъде показано.

Примерна структура на HTML:

<body>
  <div id="app">
    <!-- Тук ще се рендерира Vue приложението -->
  </div>

  <!-- Целеви контейнер за teleport -->
  <div id="modal-target"></div>
</body>

Състоянието на компонента (showModal) и неговата логика остават свързани с компонента, дори ако неговата част се рендерира на друго място. Това прави teleport-ите мощен инструмент за управление на сложни потребителски интерфейси с плаващи елементи.