正文

在DOM結(jié)構(gòu)相對(duì)比較復(fù)雜,層級(jí)嵌套比較深的組件內(nèi),需要根據(jù)相對(duì)應(yīng)的模塊業(yè)務(wù)處理一些邏輯,該邏輯屬于當(dāng)前組件

但是從整個(gè)頁(yè)面應(yīng)用的視圖上看,它在DOM中應(yīng)該被渲染在整個(gè)vue應(yīng)用外部的其他地方,不能影響組件的結(jié)構(gòu)

比較常見(jiàn)的應(yīng)用場(chǎng)景:就是全屏的模態(tài)框,控制元素的位置,也是可以處理的,但是比較麻煩

在理想情況下,我們希望在具體的組件中,給元素綁定的事件,與具體要控制的DOM元素結(jié)構(gòu)在同一個(gè)組件中,具體的位置處,保持一定的相關(guān)聯(lián)性

而不用特意的把一些DOM結(jié)構(gòu)給分離出去,然而,在同一組件中,觸發(fā)模態(tài)框的按鈕和模態(tài)框本身在同一組件中

因?yàn)樗麄兌寂c組件的開(kāi)關(guān)狀態(tài)有相關(guān)聯(lián),模態(tài)框與按鈕一起渲染在應(yīng)用DOM結(jié)構(gòu)很深的地方,會(huì)導(dǎo)致模態(tài)框的css布局位置非常難控制

鑒于這樣的場(chǎng)景和困難,Vue官方提供了一個(gè)Teleport組件,很好的可以解決這個(gè)問(wèn)題,讓開(kāi)發(fā)者不需要顧慮DOM結(jié)構(gòu)的問(wèn)題

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

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

如下所示,父組件如下所示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,我們需要在孫(后代)組件,添加一個(gè)按鈕,點(diǎn)擊按鈕,彈出一個(gè)彈框,水平垂直居中顯示在頁(yè)面中央

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

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

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

控制的問(wèn)題,解決起來(lái)會(huì)非常的痛苦

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

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

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

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

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

注意

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

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

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

如下代碼是不行的

<template>
    <div class="header">
        <Teleport to=".content">
            <div>我是頭部的內(nèi)容</div>
        </Teleport>
    </div>
    <div class="footer">
        底部?jī)?nèi)容
        <div class="content"></div>
    </div>
</template>
<script setup>
</script>
<style lang="less">
h1 {
    color: red;
}
</style> 

03-需要知道的

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

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

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

04-如何禁用 Teleport

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

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

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

05-多個(gè) Teleport 共享目標(biāo)時(shí)

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

比如下面這樣的用例

<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>

總結(jié)

這個(gè)teleport組件在實(shí)際開(kāi)發(fā)中還是很實(shí)用的,能夠解決當(dāng)組件嵌套層級(jí)很深,而后代組件中的模板,想要脫離當(dāng)前組件結(jié)構(gòu),解決css布局層面的干擾,那就可以用這個(gè)teleport組件

以上就是VueJs中如何使用Teleport及組件嵌套層次結(jié)構(gòu)詳解的詳細(xì)內(nèi)容，更多關(guān)于VueJs使用Teleport組件的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論