Ի՞նչ են 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) և նրա տրամաբանությունը մնում են կապված կոմպոնենտի հետ, նույնիսկ եթե նրա մի մասը ռենդեր է այլ վայրում։ Սա դարձնում է տելեպորտները հզոր գործիք՝ բարդ օգտագործողի ինտերֆեյսերը կառավարելու համար՝ հպանցիկ տարրերով։