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>