Vue'da teleportler nedir?

Vue 3'te Teleportler, bir bileşenin içeriğini DOM ağacında başka bir yere, bileşenin gerçek konumuna bağlı kalmadan render etme yöntemidir.

Bu, şunlar için faydalıdır:

Modül ve pop-up pencereleri: Bir modül veya bildirim penceresini kolayca <body> veya <html> kök öğelerine taşıyarak z-index sorunlarından ve ebeveyn öğelerin kesilmesinden kaçınmayı sağlar.
Yeniden kullanılabilir bileşenler: İçeriğin bir bölümünü farklı yerlerde render edebilen bileşenler oluşturmayı sağlar, böylece mantık tek bir bileşende kalır.

<Teleport> kullanımı sözdizimi:

<template>
  <div>
    <!-- Ana bileşen içeriği -->
    <button @click="showModal = true">Modali Aç</button>

    <!-- Modül içeriği, #modal-target'a teleport edilir -->
    <Teleport to="#modal-target">
      <div class="modal-overlay" v-if="showModal">
        <div class="modal-content">
          <h2>Modül başlığı</h2>
          <p>Modül metni.</p>
          <button @click="showModal = false">Kapat</button>
        </div>
      </div>
    </Teleport>
  </div>
</template>

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

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

<style scoped>
/* Bileşen stilleri */
</style>

to özniteliği, <Teleport> içeriğinin taşınacağı DOM'daki hedef konteyneri gösterir. Hedef şu olabilir:

CSS seçici dizesi (örneğin, #modal-target, .container).
DOM elementi (örneğin, document.getElementById() veya document.querySelector() ile alınmış).

Hedef konteyner bulunamazsa, içerik gösterilmez.

HTML yapısına örnek:

<body>
  <div id="app">
    <!-- Vue uygulaması burada render edilir -->
  </div>

  <!-- Teleport için hedef konteyner -->
  <div id="modal-target"></div>
</body>

Bileşenin durumu (showModal) ve mantığı, bileşen başka bir yerde render edilse bile, bileşene bağlı kalır. Bu, karmaşık kullanıcı arayüzlerini yönetmek için teleportları güçlü bir araç haline getirir.