> 在vue3中可以通過`teleport`這個(gè)內(nèi)置組件將我們封裝的組件渲染到指定的元素中，比如渲染到`body`中，這非常適用于一些彈窗組件。
使用`<teleport>`，告訴 Vue “將這個(gè) HTML**傳送**到‘**body**’標(biāo)簽下”。
~~~
app.component('modal-button', {
template: `
<button @click="modalOpen = true">
Open full screen modal! (With teleport!)
</button>
<teleport to="body">
<div v-if="modalOpen" class="modal">
<div>
I'm a teleported modal!
(My parent is "body")
<button @click="modalOpen = false">
Close
</button>
</div>
</div>
</teleport>
`,
data() {
return {
modalOpen: false
}
}
})
~~~
一旦我們單擊按鈕打開模態(tài)框，Vue 將正確地將模態(tài)框內(nèi)容渲染為`body`標(biāo)簽的子級(jí)。
- 使用vite創(chuàng)建vue3項(xiàng)目
- vue3和vue2的區(qū)別
- v-for 內(nèi)的 ref 不再注冊(cè) ref 數(shù)組
- 異步組件的用法區(qū)別
- 自定義指令的用法區(qū)別
- 自定義事件的區(qū)別
- 過濾器已被移除，可使用全局屬性代替
- 全局API的一些變化
- key屬性
- 插槽的使用區(qū)別
- v-model的使用區(qū)別
- watch偵聽數(shù)組的變化
- <style>的變量綁定
- <style scoped> 中可以對(duì)全局和插槽的樣式做修改
- 組合式API
- composition API
- 組合式 API 語法糖 script setup
- Teleport將組件渲染到指定元素
- 其他事項(xiàng)
- 移除 $children
- 移除 $listeners