Vue'dagi teleportlar nima?

Vue 3'dagi Teleport — bu komponent mazmunini DOM daraxtida boshqa joyga, uning haqiqiy joylashuvidan mustaqil ravishda render qilish usulidir.

Bu quyidagilar uchun foydalidir:

Modal va pop-up oynalar: Ular modal oynani yoki pop-up bildirishnomani osongina <body> yoki <html> ning asosiy elementlariga ko‘chirish imkonini beradi, z-index muammolari va ota-elemntlar tomonidan kesilishdan qochish uchun.
Qayta ishlatiladigan komponentlar: Ular o‘z mazmunining bir qismini turli joylarda render qilish imkonini beradi, bu esa ularning mantiqini bitta komponentda saqlash imkonini beradi.

<Teleport> ning ishlatilish sintaksisi:

<template>
  <div>
    <!-- Asosiy komponent mazmuni -->
    <button @click="showModal = true">Modalni ochish</button>

    <!-- Modal mazmuni, #modal-target ga teleport qilingan -->
    <Teleport to="#modal-target">
      <div class="modal-overlay" v-if="showModal">
        <div class="modal-content">
          <h2>Modal sarlavhasi</h2>
          <p>Modal matni.</p>
          <button @click="showModal = false">Yopish</button>
        </div>
      </div>
    </Teleport>
  </div>
</template>

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

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

<style scoped>
/* Komponent uchun uslublar */
</style>

to atributi DOM dagi maqsad konteynerni ko‘rsatadi, unga <Teleport> mazmuni ko‘chiriladi. Maqsad quyidagilar bo‘lishi mumkin:

CSS selektor satri (masalan, #modal-target, .container).
DOM elementi (document.getElementById() yoki document.querySelector() yordamida olingan).

Agar maqsad konteyner topilmasa, mazmun ko‘rsatilmaydi.

HTML tuzilmasi misoli:

<body>
  <div id="app">
    <!-- Bu yerda Vue ilovasi render qilinadi -->
  </div>

  <!-- Teleport uchun maqsad konteyner -->
  <div id="modal-target"></div>
</body>

Komponent holati (showModal) va uning mantiqi komponent bilan bog‘liq bo‘lib qoladi, hatto uning qismi boshqa joyda render qilinsa ham. Bu teleportlarni murakkab foydalanuvchi interfeyslarini boshqarishda kuchli vositaga aylantiradi.