[[431959]]

一、teleport 介紹

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

使用語法：

<teleport to="body"> 
 <div> 
  需要?jiǎng)?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、多個(gè) teleport 使用

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

使用如下：

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

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

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

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

二、為什么使用 teleport

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

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

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

三、teleport 應(yīng)用

使用 vite + vue 3 創(chuàng)建的項(xiàng)目，具體如何創(chuàng)建項(xiàng)目請(qǐ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 >我是一個(gè) Modal 框</div> 
  </div> 
</teleport> 

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

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

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

錯(cuò)誤信息如下：

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é)會(huì)把 腳手架 vue-cli 3 創(chuàng)建的項(xiàng)目，當(dāng)作是 vue3 。vue-cli 2 和 vue-cli 3 創(chuàng)建項(xiàng)目與是否是 vue3 沒有必然聯(lián)系的。