Vue-də teleportlər nədir?

Vue 3-də Teleport komponentin məzmununu DOM ağacında başqa bir yerə, komponentin faktiki yerləşməsindən asılı olmayaraq, render etmək üçün bir yoldur.

Bu, aşağıdakılar üçün faydalıdır:

Modal pəncərələr və pop-up-lar: Onlar modal pəncərə və ya pop-up bildirişini asanlıqla <body> və ya <html>-in əsas elementlərinə köçürməyə imkan verir, z-index və valideyn elementlərin kəsilməsindən qaçmaq üçün.
Yenidən istifadə olunan komponentlər: Onlar öz məzmunlarının bir hissəsini müxtəlif yerlərdə render edə bilən komponentlər yaratmağa imkan verir, bununla da onların məntiqi bir komponentdə saxlanılır.

<Teleport>-un istifadə sintaksisi:

<template>
  <div>
    <!-- Əsas komponent məzmunu -->
    <button @click="showModal = true">Modalı aç</button>

    <!-- Modal məzmunu, #modal-target-ə teleport edilir -->
    <Teleport to="#modal-target">
      <div class="modal-overlay" v-if="showModal">
        <div class="modal-content">
          <h2>Modal başlığı</h2>
          <p>Modal məzmunu.</p>
          <button @click="showModal = false">Bağla</button>
        </div>
      </div>
    </Teleport>
  </div>
</template>

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

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

<style scoped>
/* Komponent üçün stil */
</style>

to atributu DOM-də hədəf konteyneri göstərir, oraya <Teleport>-in məzmunu köçürüləcək. Hədəf aşağıdakılar ola bilər:

CSS seçici sətiri (məsələn, #modal-target, .container).
DOM elementi (document.getElementById() və ya document.querySelector() vasitəsilə alınmış).

Əgər hədəf konteyner tapılmazsa, məzmun göstərilməyəcək.

HTML struktur nümunəsi:

<body>
  <div id="app">
    <!-- Vue tətbiqi burada render ediləcək -->
  </div>

  <!-- Teleport üçün hədəf konteyner -->
  <div id="modal-target"></div>
</body>

Komponentin vəziyyəti (showModal) və onun məntiqi komponentə bağlı qalır, hətta onun bir hissəsi başqa yerdə render olunsa belə. Bu, teleportları mürəkkəb istifadəçi interfeyslərini idarə etmək üçün güclü alət edir.