Ответ
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)
Ответ 18+ 🔞
А, ну вот, смотри, опять эти ваши модные штуки. Teleport, блядь. Звучит как хуйня из "Стартрека", а на деле — просто способ выкинуть кусок твоего компонента в другое место DOM-дерева, чтобы он не задыхался в родительской иерархии.
Представь: ты пишешь модалку, а она у тебя где? Правильно, где-то в глубине какого-нибудь <div class="container mx-auto p-4">. И тут бац — у родителя overflow: hidden или z-index ебанутый. И твоя красивая модалка либо обрезается, либо прячется под другими слоями, как последняя манда. Вот от этой ебалы и спасает <teleport>.
Суть проще пареной репы: рендеришь что хочешь, но не здесь, а там, куда укажешь. В 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>Видишь? Нажал кнопку — модалка всплыла, но прицепилась прямиком к <body>. Никакие родительские стили ей теперь не указ. Закрыл — она исчезла оттуда же. Красота!
А в атрибут to можно не только "body" пихать. Любой CSS-селектор сгодится: "#portal-target", ".modal-container" — на что фантазии хватит. Главное, чтобы этот элемент в DOM уже существовал, а то будет облом, чувак.
Короче, вещь архиполезная для тултипов, нотификаций, сайдбаров и прочей хуеты, которая должна быть поверх всего. Раньше для этого костыли городили, а теперь — раз, и <teleport>. Удобно, ёпта.