我們先看一段代碼，功能很簡單，模板里有一個按鈕，點擊按鈕，展示一個模態視窗，
const app = Vue.createApp({
data() {
return {
show: false,
};
},
methods: {
handleShowModal() {
this.show = true;
},
},
template: `
<div id="box">
<button @click="handleShowModal">顯示模態視窗</button>
<div v-if="show">模態視窗</div>
</div>
`
}
模態視窗樣式如下：
.box {
position: absolute;
width: 100px;
height: 100px;
background-color: cadetblue;
}
.modal {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.5);
}
整個模態視窗呈絕對定位，left、right、top、bottom 全部給0，背景色為黑色半透明，我們期望的效果，應該點擊按鈕，模態視窗覆寫整個頁面，
現在我們來運行下，我們會發現，其實模態視窗只覆寫了 #box 元素，因為 #box 本身就是絕對定位， 模態視窗元素是他的子節點，所以模態視窗只覆寫了 #box 元素，
如果在沒有學習 teleport 之前，我們會在根節點定義一個模態視窗，在業務組件里去做呼叫，但是這樣的話，組件與模態視窗的邏輯就會產生割裂感，那有沒有什么方法，可以讓我模態視窗就寫在這個組件內，但真正呈現在頁面時，可以動態插入到 元素上的，其實是有的，我們只要簡單的修改下 template模板，就可以實作這個要求了，
template: `
<div >
<button @click="handleShowModal">顯示模態視窗</button>
<teleport to="body">
<div >模態視窗</div>
</teleport>
</div>
`
我們用 teleport 元素將 modal 包裹起來，并定義屬性 to="body" ，運行頁面，我們查看 dom 節點，就會發現 modal 元素已經追加到 body 底部了，效果如下，
--body
--#root vue根節點
--.modal 模態視窗
傳送到其他位置
如果我們想將 modal 節點傳送到其他位置，也可以這么做，
<teleport to="#app">
<div >模態視窗</div>
</teleport>
這段代碼就是將 modal 元素追加到 id=app 的元素內，有一點需要注意，我一直說的是追加元素，假如說，原來 #app 內部已經存在其他節點，那么 modal 元素將追加到這些節點之后，有興趣可以自己試一下，
與組件一起使用
其實使用在組件上和普通的 dom 元素并沒有什么區別，組件中的節點將被渲染到指定的dom節點中（body或者指定ID）
const app = Vue.createApp({
...
template: `
<div id="box">
<button @click="handleShowModal">顯示模態視窗</button>
<teleport to="body">
<child-component :name="name"/>
</teleport>
</div>
`
}
app.component('child-component',{
props:['name']
template: `<div class='modal'>{{name}}</div>`
})
即使被渲染到不同的節點，它仍和普通子組件一樣，接收父組件傳輸的資料，并沒有因為渲染節點改變而改變，
對同一目標使用多個 teleport
<teleport to="#modals">
<div>A</div>
</teleport>
<teleport to="#modals">
<div>B</div>
</teleport>
結果如下：
-- #modal
-- A
-- B
所以上面我一直強調，使用 teleport 是將包裹元素追加到指定節點，所以上面兩個 teleport 將依次追加到 #modal 上，
總結
teleport多應用于邏輯屬于該組件，而從技術角度講，卻要把它移動到其他節點（body或者指定ID的元素） 里，最常見的場景就是創建一個包含全屏模式的組件，邏輯存在于組件內，但是基于css樣式，卻要把他移動到 body 元素上，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/242279.html
標籤：JavaScript
上一篇：vue3和vue2生命周期的對比