Vue-ში ტელეპორტები რა არის?

Vue 3-ში ტელეპორტები — ეს კომპონენტის შიგთავსის რენდერების სხვა ადგილას DOM-ხის რგოლში, რომელიც დაკავშირებული არაა კომპონენტის რეალურ მდებარეობასთან ჰიერქიაში.

ეს სასარგებლოა:

მოდალური ფანჯრები და გამოჩენილ ფანჯრები: საშუალებას იძლევა მარტივად გადაიტანოთ მოდალური ფანჯარა ან გამოჩენილი შეტყობინება <body> ან <html> ძირითადი ელემენტებში, თავიდან აიცილოთ z-index პრობლემები და მშობელ ელემენტებთან შეზღუდვა.
გადავრცელებული კომპონენტები: აძლევს საშუალებას შექმნათ კომპონენტები, რომლებიც შეუძლიათ მათი შინაარსის ნაწილი სხვადასხვა ადგილას რენდერება, ამავდროულად შენარჩუნებული აქვთ მათი ლოგიკა ერთ კომპონენტში.

<Teleport>-ის გამოყენების სინტაქსი:

<template>
  <div>
    <!-- კომპონენტის ძირითადი შინაარსი -->
    <button @click="showModal = true">მოდალური ფანჯრის გახსნა</button>

    <!-- მოდალური ფანჯრის შინაარსი, რომელიც გადადის #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) და მისი ლოგიკა რჩება დაკავშირებული კომპონენტთან, მიუხედავად იმისა, რომ მისი ნაწილი სხვა ადგილას რენდერდება. ეს ქმნის ტელეპორტებს ძლიერ ინსტრუმენტს რთული მომხმარებლის ინტერფეისების მართვისთვის, გამოჩენილ ელემენტებთან ერთად.