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 ></div>
<Teleport to=".modal">
測驗
</Teleport>
<Teleport to="#app"> 測驗 </Teleport>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/501537.html
標籤：其他