Penjelasan mendalam tentang cara menggunakan komponen Teleport dalam Vue

Bagaimana untuk menggunakan komponen Teleport dalam Vuejs? Artikel berikut akan menunjukkan kepada anda cara menggunakan komponen Teleport dalam Vue. Saya harap ia akan membantu anda!

Dalam DOM komponen dengan struktur yang agak kompleks dan sarang hierarki yang mendalam, beberapa logik perlu diproses berdasarkan perniagaan modul yang sepadan, yang tergolong dalam komponen semasa

Tetapi daripada paparan keseluruhan aplikasi halaman, ia harus dipaparkan dalam DOM di tempat lain di luar keseluruhan aplikasi vue dan tidak boleh menjejaskan struktur komponen

Aplikasi yang lebih biasa Senario: Ia adalah kotak modal skrin penuh yang mengawal kedudukan elemen Ia juga boleh dikendalikan, tetapi ia lebih menyusahkan

Dalam situasi yang ideal, kami berharap dalam komponen tertentu, peristiwa yang terikat kepada. elemen akan dikaitkan dengan khusus Struktur elemen DOM yang akan dikawal berada dalam komponen yang sama dan mengekalkan korelasi tertentu di lokasi tertentu. [Cadangan berkaitan: tutorial video vuejs, pembangunan bahagian hadapan web]

tanpa sengaja memisahkan beberapa DOM struktur, walau bagaimanapun, dalam komponen yang sama, butang yang mencetuskan kotak modal dan kotak modal itu sendiri berada dalam komponen yang sama

kerana kedua-duanya berkaitan dengan keadaan suis komponen Kotak modal dan butang dipaparkan bersama dalam aplikasi DOM dengan tempat struktur yang dalam, ia akan menjadikan kedudukan susun atur css kotak modal sangat sukar dikawal

Memandangkan senario dan kesukaran sedemikian, Vue secara rasmi menyediakan komponen Teleport, yang boleh menyelesaikan masalah ini sangat baik dan membolehkan pembangun untuk Tidak perlu risau tentang DOMisu struktur

01-Apabila hierarki komponen set komponen sangat mendalam

Sebagai contoh: terdapat dua komponen , komponen induk dan komponen anak, di dalam komponen turunan Tambah butang untuk muncul kotak modal dan biarkan ia dipaparkan secara menegak dan mendatar di tengah halaman

seperti yang ditunjukkan di bawah, dan komponen induk seperti yang ditunjukkan. di bawah App.vue

<template>
    <div class="App">
        我是父组件
        <Child />
    </div>
</template>
<script setup>
    import Child from "./Child.vue"
</script>
<style>
.App {
    width: 400px;
    height: 400px;
    background:red;
}
</style>

seperti berikut Child Komponen, kod sampel adalah seperti berikut Child.vue, kita perlu menambah butang dalam komponen cucu (keturunan), klik butang, pop kotak -up akan muncul, dan ia akan dipaparkan secara mendatar dan menegak di tengah halaman

<template>
    <div class="child">
      <p>我是子组件</p>
        <button @click="isModel=true">打开模态框</button>
        <div class="mask-dialog" v-if="isModel">
             <div class="box">
                  <h2>我是标题</h2>
                  <div>我是弹框内容</div>
                  <div>
                      <button @click="isModel=false">关闭</button>
                  </div>
             </div>
        </div>
    </div>
</template>
<script setup>
import { ref } from "vue";
let isModel = ref(false);
</script>
<style>
.child {
    width: 300px;
    height:300px;
    background:green;
}
/**灰色遮罩层 */
  .mask-dialog {
    width: 100%;
    height:100%;
    position:absolute;
    left:0;
    top:0;
    background:rgba(0,0,0,0.5)
  }
  
  .box {
    width: 200px;
    height:200px;
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    background:pink;
    text-align:center;
  }
</style>

Terdapat butang button dalam komponen kanak-kanak untuk mencetuskan pembukaan kotak modal komponen semasa. Terdapat logik untuk mengawal paparan dan menyembunyikan kotak pop timbul Apabila komponen bersarang dalam dan kompleks,

jika induk Terdapat kedudukan elemen tahap sub-elemen, gunakan css atau transform daripada position:absolute untuk merujuk kepada perubahan objek, yang akan memusnahkan struktur reka letak dan beberapa css gaya

akan muncul sangat menyakitkan untuk menyelesaikan

Kemudian komponen Teleport ini adalah untuk menyelesaikan masalah seperti ini Anda boleh meletakkan serpihan struktur DOM yang ditentukan secara bebas di luar komponen dan tidak dipengaruhi oleh komponen semasa

Selepas pengubahsuaian oleh Teleport

<template>
    <div class="child">
      <p>我是子组件</p>
        <button @click="isModel=true">打开模态框</button>
        <Teleport to="body">
            <div class="mask-dialog" v-if="isModel">
                 <div class="box">
                      <h2>我是标题1</h2>
                      <div>我是弹框内容</div>
                      <div>
                          <button @click="isModel=false">关闭</button>
                      </div>
                 </div>
            </div>
        </Teleport>  
    </div>
</template>
<script setup>
import { ref } from "vue";
let isModel = ref(false);
</script>
<style>
.child {
    width: 300px;
    height:300px;
    background:green;
}
/**灰色遮罩层 */
  .mask-dialog {
    width: 100%;
    height:100%;
    position:absolute;
    left:0;
    top:0;
    background:rgba(0,0,0,0.5)
  }
  
  .box {
    width: 200px;
    height:200px;
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    background:pink;
    text-align:center;
  }
</style>

<Teleport> menerima to prop untuk menentukan sasaran penghantaran. Nilai to boleh menjadi rentetan pemilih CSS, atau id, atau boleh menjadi objek elemen DOM. Fungsi kod ini adalah untuk memberitahu Vue untuk memindahkan serpihan templat berikut ke tag body

<Teleport to="#some-id">html结构代码</Teleport>
<Teleport to=".some-class">html结构代码</Teleport>
<Teleport to="body">html结构代码</Teleport>
<Teleport to="html">html结构代码</Teleport>

komponen 02-Teleport

yang merupakan pegawai terbina dalam yang disediakan oleh Vue Komponen, yang boleh "memindahkan" sebahagian daripada templat di dalam komponen ke lokasi lapisan luar struktur DOM komponen Iaitu, teknologi yang boleh menggerakkan struktur html komponen kami ke lokasi yang ditentukan

<teleport to="移动到指定的位置,可以是html,body,或id,class">
   里面是Html结构模板内容
</teleport>

Perhatikan bahawa

<Teleport> dipindahkan apabila melekapkan to Sasaran mesti sudah wujud dalam DOM. Sebaik-baiknya, ini mestilah elemen di luar keseluruhan Vue pokok DOM aplikasi. Jika elemen sasaran juga dipaparkan oleh Vue, anda perlu memastikan untuk melekapkan elemen <Teleport> sebelum melekapkan

Ini

akan meletakkan templat yang ditentukan teleport ke dalam kedudukan yang ditentukan adalah bersyarat dan tidak boleh dipindah milik sewenang-wenangnya html

Elemen sasaran mesti wujud sebelum komponen boleh dipasang, iaitu sasaran tidak boleh diberikan oleh komponen itu sendiri, dan sebaik-baiknya harus ditempatkan dalam keseluruhan

pokok komponen di luar. Vue

Kod berikut tidak akan berfungsi

<template>
    <div>
        <Teleport to=".content">
            <div>我是头部的内容</div>
        </Teleport>
         
    </div>
    <div>
        底部内容
        <div></div>
    </div>
</template>
<script setup>
</script>
<style>
h1 {
    color: red;
}
</style>

03-Apa yang anda perlu tahu

hanya mengubah rendering teleport struktur, ia tidak akan menjejaskan hubungan antara komponen hubungan logik. Maksudnya, jika DOM mengandungi komponen, maka komponen itu sentiasa mengekalkan hubungan induk-anak yang logik dengan komponen menggunakan <Teleport>. Acara <teleport> masuk dan tercetus juga akan berfungsi seperti biasa. props

这也意味着来自父组件的注入也会按预期工作，子组件将在 Vue Devtools 中嵌套在父级组件下面，而不是放在实际内容移动到的地方

位置移动了,提现在结构模板上,但是数据逻辑依旧存在关联的

04-如何禁用 Teleport

在某些场景下可能需要视情况禁用 <Teleport>。举例来说，我们想要在桌面端将一个组件当做浮层来渲染，但在移动端则当作行内组件。我们可以通过对 <Teleport> 动态地传入一个 disabled prop 来处理这两种不同情况

<Teleport :disabled="isMobile">
  ...
</Teleport>

这里的 isMobile 状态可以根据 CSS media query 的不同结果动态地更新

05-多个 Teleport 共享目标时

一个可重用的模态框组件可能同时存在多个实例。对于此类场景，多个 <Teleport> 组件可以将其内容挂载在同一个目标元素上，而顺序就是简单的顺次追加，后挂载的将排在目标元素下更后面的位置上

比如下面这样的用例

<Teleport to=".content">
  <div>A</div>
</Teleport>
<Teleport to=".content">
  <div>B</div>
</Teleport>

渲染的结果为

<div class="content">
  <div>A</div>
  <div>B</div>
</div>

总结

这个teleport组件在实际开发中还是很实用的,能够解决当组件嵌套层级很深,而后代组件中的模板,想要脱离当前组件结构,解决css布局层面的干扰,那就可以用这个teleport组件

（学习视频分享：vuejs入门教程、编程基础视频）

Atas ialah kandungan terperinci Penjelasan mendalam tentang cara menggunakan komponen Teleport dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!