Vue3系列11–Teleport傳送組件
Teleport 是一種能夠將我們的模板移動到 DOM 中 Vue app 之外的其他位置的技術，不受父級style、v-show等屬性影響，但data、prop數據依舊能夠共用的技術；類似於 React 的 Portal。主要解決的問題 因為Teleport節點掛載在其他指定的DOM節點下，完全不受父級style樣式影響。
場景：像 modals,toast 等這樣的元素，很多情況下，我們將它完全的和我們的 Vue 應用的 DOM 完全剝離，管理起來反而會方便容易很多，原因在於如果我們嵌套在 Vue 的某個組件內部，那麼處理嵌套組件的定位、z-index 和樣式就會變得很困難，另外，像 modals,toast 等這樣的元素需要使用到 Vue 組件的狀態（data 或者 props）的值，這就是 Teleport 派上用場的地方。我們可以在組件的邏輯位置寫模板程式碼，這意味著我們可以使用組件的 data 或 props。然後在 Vue 應用的範圍之外渲染它
使用方法：
通過to 屬性 插入指定元素位置 to=”body” 便可以將Teleport 內容傳送到指定位置，例如下面將內容傳輸到body裡面。
也可以自定義傳送位置 支援 class id等 選擇器；也可以使用多個。
<div id="app"></div>
<div class="modal"></div>
<Teleport to=".modal">
測試
</Teleport>
<Teleport to="#app"> 測試 </Teleport>
