<Teleport>

Misol

<div> elementini <body> ildiziga ko‘chirish uchun o‘rnatilgan <Teleport> komponentidan foydalanish:

<Teleport to="body">
  <div id="redDiv">Hello!</div>
</Teleport>

Misolni ishga tushirish »

Quyida ko‘proq misollarni ko‘ring.

Ta’rif va qo‘llanilishi

O‘rnatilgan <Teleport> komponenti to prop’i bilan birga elementni joriy HTML strukturasidan chiqarib, DOMga allaqachon o‘rnatilgan (mount qilingan) boshqa element ichiga ko‘chirish uchun ishlatiladi.

Element <Teleport> komponenti yordamida haqiqatan ham boshqa joyga ko‘chirilganini ko‘rish uchun sahifada sichqonchaning o‘ng tugmasini bosib, uni tekshirib (inspect) ko‘rishingiz kerak bo‘lishi mumkin.

Teleport qilingan element manzilda allaqachon o‘rnatilgan (mount qilingan) boshqa elementlardan keyin joylashadi. Shuning uchun bir nechta element bitta manzilga teleport qilinsa, eng oxirgi teleport qilingan element boshqa teleport qilingan elementlardan pastda joylashadi.

Agar komponentni ko‘chirish uchun <Teleport> ishlatilsa, ushbu komponent bilan provide/inject yoki prop/emit orqali ikki tomonlama aloqa xuddi komponent ko‘chirilmagandek avvalgidek ishlayveradi.

Shuningdek, agar biror kontent <Teleport> yordamida komponentdan tashqariga ko‘chirilsa, Vue komponent ichidagi <script> va <style> teglaridagi tegishli kod ko‘chirilgan kontent uchun ham ishlashda davom etishini ta’minlaydi. Quyidagi misolga qarang.

Props

Prop	Tavsif
to	Majburiy. String. Maqsad nomini belgilang	Misolni ishga tushirish »
disabled	Ixtiyoriy. Boolean. Teleport funksiyasi o‘chirib qo‘yilishi kerakligini belgilang	Misolni ishga tushirish »

Ko‘proq misollar

Misol

<style> va <script> teglaridagi tegishli kod teleport qilingan <div> tegi uchun ham ishlaydi, garchi u kompilyatsiyadan keyin endi komponent ichida bo‘lmasa ham.

CompOne.vue:

<template>
  <div>
    <h2>Component</h2>
    <p>This is the inside of the component.</p>
    <Teleport to="body">
      <div 
        id="redDiv" 
        @click="toggleVal = !toggleVal" 
        :style="{ backgroundColor: bgColor }"
      >
        Hello!<br>
        Click me!
      </div>
    </Teleport>
  </div>
</template>

<script>
export default {
  data() {
    return {
      toggleVal: true
    }
  },
  computed: {
    bgColor() {
      if (this.toggleVal) {
        return 'lightpink'
      }
      else {
        return 'lightgreen'
      }
    }
  }
}
</script>

<style scoped>
#redDiv {
  margin: 10px;
  padding: 10px;
  display: inline-block;
}

#redDiv:hover {
  cursor: pointer;
}
</style>

Misolni ishga tushirish »

Misol

Boolean turidagi disabled prop’i tugma yordamida almashtiriladi, shunda <div> elementi yo teleport qilinadi, yo qilinmaydi.

CompOne.vue:

<template>
  <div>
    <h2>Component</h2>
    <p>This is the inside of the component.</p>
    <button @click="teleportOn = !teleportOn">Teleport on/off</button>
    <Teleport to="body" :disabled="teleportOn">
      <div id="redDiv">Hello!</div>
    </Teleport>
  </div>
</template>

<script>
export default {
  data() {
    return {
      teleportOn: true
    }
  }
}
</script>

<style scoped>
  #redDiv {
    background-color: lightcoral;
    margin: 10px;
    padding: 10px;
    width: 100px;
  }
</style>

Misolni ishga tushirish »

Tegishli sahifalar

Vue darsligi: Vue Teleport

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tish Kirish