一、teleport 介紹

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

使用語法：

<teleport to="body">
    <div>
   需要建立的內容
  </div>  
</teleport>

to 屬性是指定 teleport 中的內容 加入的DOM元素。可以是標籤名，也可以是 id 或類名。

//標籤名  。上述例項就是加入body元素內，使用的是標籤名。
<teleport to="body"></teleport>

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

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

1.1、多個 teleport 使用

多個 teleport 傳送門元件可以將內容都掛載到一個目標上，多個 teleport 元件內容就是兄弟節點，先掛載的在前面，後掛載的在後面。

使用如下：

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

執行結果如圖：

上邊的例項等價於：

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

二、為什麼使用 teleport

使用 vue 開發時，都是多個元件之間不斷地巢狀，處理元素的樣式或者層級的時候就會變得困難。如我們需要新增一個 modal 模態框或 toast 提示框，如果我們把這樣的框可以從 vue 元件中剝離出來，我們樣式和層級設定起來會更加簡便。

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

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

三、teleport 應用

使用 vite + vue 3建立的專案，具體如何建立專案請檢視《什麼，你還使用 webpack？別人都在用 vite 搭建專案了》文章。

vue 3的專案建立完成之後，找到index.htm檔案，新增：

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

元件檔案內，新增 teleport 元件：

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

執行結果，我們發現使用的teleport元件，通過 to 屬性，將內容傳送到<div id="newModal"></div>內，該元素與<div id="app"></div>同級。此時 teleport 中的元素隱藏顯示完全由vue元件內的狀態值決定。

四、初學者容易遇到的坑

有些同學在自己的專案內，直接引入了 teleport 傳送門元件，執行以後發現該元件原樣輸出了，並沒有被解析，同時還會報錯。

錯誤資訊如下：

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.

然後就在網上各種查解決辦法，最後發現壓根找不到！

根本原因是你使用的還是vue2，不是vue3。有些同學會把 腳手架vue-cli 3建立的專案，當作是 vue3 。vue-cli 2 和 vue-cli 3 建立專案與是否是 vue3 沒有必然聯絡的。