極速上手 VUE 3 teleport傳送門組件及使用語法

更新時間：2021年10月26日 15:46:10 作者：前端人

teleport 傳送門組件，提供一種簡潔的方式，可以指定它里面的內(nèi)容的父元素，也就是說teleport 中的內(nèi)容允許我們控制在任意的DOM中，使用簡單，對VUE 3 teleport傳送門相關(guān)知識感興趣的朋友一起看看吧

一、teleport 介紹

teleport 傳送門組件，提供一種簡潔的方式，可以指定它里面的內(nèi)容的父元素。通俗易懂地講，就是 teleport 中的內(nèi)容允許我們控制在任意的DOM中，使用簡單。

使用語法：

<teleport to="body">
    <div>
   需要創(chuàng)建的內(nèi)容
  </div>  
</teleport>

to 屬性是指定 teleport 中的內(nèi)容加入的DOM元素。可以是標(biāo)簽名，也可以是 id 或類名。

//標(biāo)簽名  。上述實(shí)例就是加入body元素內(nèi)，使用的是標(biāo)簽名。
<teleport to="body"></teleport>

//類名。如：to=".className"
<teleport to=".className"></teleport>

//id名
<teleport to="#idName"></teleport>

1.1、多個 teleport 使用

多個 teleport 傳送門組件可以將內(nèi)容都掛載到一個目標(biāo)上，多個 teleport 組件內(nèi)容就是兄弟節(jié)點(diǎn)，先掛載的在前面，后掛載的在后面。

使用如下：

<teleport to="body">
    <div class="first">
   第一個掛載元素
  </div>  
</teleport>
<teleport to="body">
    <div class="second">
   第二個掛載元素
  </div>  
</teleport>

運(yùn)行結(jié)果如圖：

上邊的實(shí)例等價于：

<teleport to="body">
 <div class="first">
  第一個掛載元素
 </div>
 <div class="second">
  第二個掛載元素
 </div>
</teleport>

二、為什么使用 teleport

使用 vue 開發(fā)時，都是多個組件之間不斷地嵌套，處理元素的樣式或者層級的時候就會變得困難。如我們需要添加一個 modal 模態(tài)框或 toast 提示框，如果我們把這樣的框可以從 vue 組件中剝離出來，我們樣式和層級設(shè)置起來會更加簡便。

有些同學(xué)會想，這直接放到 index.html 中不就好了嗎？另外 modal 、toast 元素需要使用 vue 組件的狀態(tài)值，通過狀態(tài)控制 modal、toast 的隱藏顯示。如果直接放入 index.html 則狀態(tài)控制就復(fù)雜了。

所以 teleport 傳送門組件就派上用場了。有點(diǎn)像“哆啦A夢”的任意門，可以把元素傳送到任意的元素內(nèi)。同時還可以使用 vue 組件內(nèi)的狀態(tài)值控制它。

三、teleport 應(yīng)用

使用 vite + vue 3創(chuàng)建的項(xiàng)目，具體如何創(chuàng)建項(xiàng)目請查看《什么，你還使用 webpack？別人都在用 vite 搭建項(xiàng)目了》文章。

vue 3的項(xiàng)目創(chuàng)建完成之后，找到index.htm文件，添加：

<div id="newModal"></div>

組件文件內(nèi)，添加 teleport 組件：

<button @click="showModal" class="btn">打開 modal </button>
<!-- to 屬性就是目標(biāo)位置 -->
<teleport to="#newModal">
 <div v-if="visible">
  <div >我是一個 Modal 框</div>
  </div>
</teleport>

運(yùn)行結(jié)果，我們發(fā)現(xiàn)使用的teleport組件，通過 to 屬性，將內(nèi)容傳送到<div></div>內(nèi)，該元素與<div></div>同級。此時 teleport 中的元素隱藏顯示完全由vue組件內(nèi)的狀態(tài)值決定。

四、初學(xué)者容易遇到的坑

有些同學(xué)在自己的項(xiàng)目內(nèi)，直接引入了 teleport 傳送門組件，運(yùn)行以后發(fā)現(xiàn)該組件原樣輸出了，并沒有被解析，同時還會報錯。

錯誤信息如下：

vue.runtime.esm.js?2b0e:619 [Vue warn]: Unknown custom element: <teleport> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

然后就在網(wǎng)上各種查解決辦法，最后發(fā)現(xiàn)壓根找不到！

根本原因是你使用的還是vue2，不是vue3。有些同學(xué)會把腳手架vue-cli 3創(chuàng)建的項(xiàng)目，當(dāng)作是 vue3 。vue-cli 2 和 vue-cli 3 創(chuàng)建項(xiàng)目與是否是 vue3 沒有必然聯(lián)系的。

到此這篇關(guān)于極速上手 VUE 3 teleport傳送門組件的文章就介紹到這了,更多相關(guān)VUE 3 teleport傳送門內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: