Vue中如何使用Teleport組件

這篇文章主要介紹“Vue中如何使用Teleport組件”，在日常操作中，相信很多人在Vue中如何使用Teleport組件問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”Vue中如何使用Teleport組件”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

員工經(jīng)過長期磨合與沉淀，具備了協(xié)作精神，得以通過團隊的力量開發(fā)出優(yōu)質(zhì)的產(chǎn)品。創(chuàng)新互聯(lián)公司堅持“專注、創(chuàng)新、易用”的產(chǎn)品理念，因為“專注所以專業(yè)、創(chuàng)新互聯(lián)網(wǎng)站所以易用所以簡單”。公司專注于為企業(yè)提供網(wǎng)站設計、成都做網(wǎng)站、微信公眾號開發(fā)、電商網(wǎng)站開發(fā)，微信小程序定制開發(fā)，軟件定制設計等一站式互聯(lián)網(wǎng)企業(yè)服務。

01-組件套組件層次結(jié)構(gòu)很深時

比如:現(xiàn)在有兩個組件,父組件,子組件,在后代組件內(nèi),添加一個按鈕,彈出一個模態(tài)框,讓它在頁面垂直水平居中顯示

如下所示,父組件如下所示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>

如下是Child組件,示例代碼如下所示Child.vue,我們需要在孫(后代)組件,添加一個按鈕,點擊按鈕,彈出一個彈框,水平垂直居中顯示在頁面中央

<template>
    <div class="child">
      <p>我是子組件</p>
        <button @click="isModel=true">打開模態(tài)框</button>
        <div class="mask-dialog" v-if="isModel">
             <div class="box">
                  <h3>我是標題</h3>
                  <div>我是彈框內(nèi)容</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>

上面的子組件中有一個button按鈕來觸發(fā)打開當前組件的模態(tài)框,里面存在著控制彈框的顯示和隱藏的邏輯,當嵌套的組件比較深,復雜時

如果父級元素存在定位,那在控制子元素的位置時,用css的transform或者position:absolute,參照對象的變更,會破壞布局結(jié)構(gòu),會出現(xiàn)一些css樣式

控制的問題,解決起來會非常的痛苦

那這個Teleport組件就是為了解決這類問題,可以將指定的DOM結(jié)構(gòu)片段,獨立于到組件外面去,不受當前組件布局結(jié)構(gòu)的影響

經(jīng)過Teleport的修改后

<template>
    <div class="child">
      <p>我是子組件</p>
        <button @click="isModel=true">打開模態(tài)框</button>
        <Teleport to="body">
            <div class="mask-dialog" v-if="isModel">
                 <div class="box">
                      <h3>我是標題1</h3>
                      <div>我是彈框內(nèi)容</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>接收一個 to prop 來指定傳送的目標。to 的值可以是一個 CSS 選擇器字符串，或id,也可以是一個 DOM 元素對象。這段代碼的作用就是告訴 Vue把以下模板片段傳送到 body 標簽下

<Teleport to="#some-id">html結(jié)構(gòu)代碼</Teleport>
<Teleport to=".some-class">html結(jié)構(gòu)代碼</Teleport>
<Teleport to="body">html結(jié)構(gòu)代碼</Teleport>
<Teleport to="html">html結(jié)構(gòu)代碼</Teleport>

02-Teleport組件

它是Vue官方提供的一個內(nèi)置組件，它可以將一個組件內(nèi)部的一部分模板“傳送”到該組件的 DOM 結(jié)構(gòu)外層的位置去也就是一種能夠?qū)⑽覀兊慕M件html結(jié)構(gòu)移動到指定位置的技術

<teleport to="移動到指定的位置,可以是html,body,或id,class">
   里面是Html結(jié)構(gòu)模板內(nèi)容
</teleport>

注意

<Teleport> 掛載時，傳送的 to 目標必須已經(jīng)存在于DOM中。理想情況下，這應該是整個 Vue 應用 DOM 樹外部的一個元素。如果目標元素也是由 Vue 渲染的，你需要確保在掛載 <Teleport> 之前先掛載該元素

這個teleport將指定的模板html,放置到頁面當中指定的位置處,它是有條件的,不是可以任意傳送的

在安裝組件之前，目標元素必須存在,即,目標不能由組件本身呈現(xiàn)，理想情況下應該位于整個Vue組件樹之外。

如下代碼是不行的

<template>
    <div>
        <Teleport to=".content">
            <div>我是頭部的內(nèi)容</div>
        </Teleport>
         
    </div>
    <div>
        底部內(nèi)容
        <div></div>
    </div>
</template>
<script setup>
</script>
<style>
h2 {
    color: red;
}
</style>

03-需要知道的

teleport只是改變了渲染的 DOM 結(jié)構(gòu)，它不會影響組件間的邏輯關系。也就是說，如果 <Teleport> 包含了一個組件，那么該組件始終和這個使用了 <teleport> 的組件保持邏輯上的父子關系。傳入的 props 和觸發(fā)的事件也會照常工作。

這也意味著來自父組件的注入也會按預期工作，子組件將在 Vue Devtools 中嵌套在父級組件下面，而不是放在實際內(nèi)容移動到的地方

位置移動了,提現(xiàn)在結(jié)構(gòu)模板上,但是數(shù)據(jù)邏輯依舊存在關聯(lián)的

04-如何禁用 Teleport

在某些場景下可能需要視情況禁用 <Teleport>。舉例來說，我們想要在桌面端將一個組件當做浮層來渲染，但在移動端則當作行內(nèi)組件。我們可以通過對 <Teleport> 動態(tài)地傳入一個 disabled prop 來處理這兩種不同情況

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

這里的 isMobile 狀態(tài)可以根據(jù) CSS media query 的不同結(jié)果動態(tài)地更新

05-多個 Teleport 共享目標時

一個可重用的模態(tài)框組件可能同時存在多個實例。對于此類場景，多個 <Teleport> 組件可以將其內(nèi)容掛載在同一個目標元素上，而順序就是簡單的順次追加，后掛載的將排在目標元素下更后面的位置上

比如下面這樣的用例

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

渲染的結(jié)果為

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

到此，關于“Vue中如何使用Teleport組件”的學習就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續(xù)學習更多相關知識，請繼續(xù)關注創(chuàng)新互聯(lián)網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>

標題名稱：Vue中如何使用Teleport組件
分享網(wǎng)址：http://jinyejixie.com/article30/pppepo.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站建設、網(wǎng)站建設、、標簽優(yōu)化、云服務器、動態(tài)網(wǎng)站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容