Vueдеги телепорттор эмне?

Vue 3-дөгү Телепорттор — бул компоненттин мазмунун DOM дарагында башка жерге көрсөтүү ыкмасы, ал компоненттин чын жайгашкан жеринен көз каранды эмес.

Бул пайдалуу:

Модал жана чыгырлар терезелери: Алар модалдык терезе же чыгыр билдирүүнү <body> же <html> түпкү элементтерине оңой которууга мүмкүндүк берет, z-index маселелеринен жана ата-элементтердин кесилишинен качуу үчүн.
Кайталап колдонулуучу компоненттер: Алар өзүнүн мазмунунун бөлүгүн ар башка жерлерде көрсөтө алчу компоненттерди түзүүгө мүмкүнчүлүк берет, ошол эле учурда өзүнүн логикасын бир компонентте сактап.

<Teleport> колдонуу синтаксиси:

<template>
  <div>
    <!-- Компоненттин негизги мазмуны -->
    <button @click="showModal = true">Модал терезени ач</button>

    <!-- Модал терезенин мазмуны, `<Teleport>` аркылуу #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>

  <!-- Телепорт үчүн максаттуу контейнер -->
  <div id="modal-target"></div>
</body>

Компоненттин абалы (showModal) жана анын логикасы компонентке байланыштуу калат, анын бир бөлүгү башка жерге рендерделсе да. Бул телепортторду күрөң колдонуучу интерфейстерин башкарууда күчтүү курал кылат.