Vue Teleport

Vue <Teleport> tegi kontentni DOM strukturasidagi boshqa joyga ko‘chirish uchun ishlatiladi.

va 'to‘ atributi

Ba’zi kontentni DOM strukturasidagi boshqa joyga ko‘chirish uchun biz kontent atrofidagi Vue <Teleport> tegidan va uni qaerga ko‘chirishni aniqlash uchun "to" atributidan foydalanamiz.

<Teleport to="body">
  <p>Hello!</p>
</Teleport>

"to" atribut qiymati CSS belgisi sifatida berilgan, shuning uchun agar biz yuqoridagi koddagi kabi ba’zi kontentni tana tegiga yubormoqchi bo‘lsak, shunchaki <Teleport to="body"> yozamiz.

Sahifani yuklangandan so‘ng tekshirish orqali kontent asosiy tegga ko‘chirilganligini ko‘rishimiz mumkin.

Misol

CompOne.vue:

<template>
  <div>
    <h2>Component</h2>
    <p>This is the inside of the component.</p>
    <Teleport to="body">
      <div id="redDiv">Hello!</div>
    </Teleport>
  </div>
</template>

Misolni ishga tushirish »

Agar sahifamizni sichqonchaning o‘ng tugmasi bilan bosib, “Tekshirish” ni tanlasak, qizil <div> element komponentdan tashqariga va <body> tegining oxiriga ko‘chirilganligini ko‘ramiz.

Biz, shuningdek, identifikatori <div id="receivingDiv"> bo‘lgan tegga ega bo‘lishimiz va biz teleport/ko‘chirmoqchi bo‘lgan kontent atrofida <Teleport to="#receivingDiv"> dan foydalanib, ba’zi kontentni shu <div>ga teleport qilishimiz mumkin.

Teleportlangan elementlarning skripti va uslubi

Ba’zi kontent <Teleport> yorlig‘i bo‘lgan komponentdan ko‘chirilgan bo‘lsa ham, <script> va <style> teglaridagi komponent ichidagi tegishli kod ko‘chirilgan kontent uchun baribir ishlaydi.

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 »

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tish Kirish