目錄1.認(rèn)識(shí)Teleport2.Teleport的基本用法3.第一步優(yōu)化4.第二步優(yōu)化5.實(shí)現(xiàn)Modal組件1.認(rèn)識(shí)Teleport

像我們?nèi)绻麑?xiě)Modal組件、Message組件、Loading組件這種全局式組件，沒(méi)有Teleport的話(huà)，將它們引入一個(gè).vue文件中，則他們的HTML結(jié)構(gòu)會(huì)被添加到組件模板中，這是不夠完美的。

沒(méi)有Teleport

有Teleport

下面就實(shí)戰(zhàn)介紹一下如何用Teleport開(kāi)發(fā)Modal組件

2.Teleport的基本用法

Teleport的寫(xiě)法十分簡(jiǎn)單，只需要用<Teleport></Teleport>將內(nèi)容包裹，并用to指定將HTML掛到哪個(gè)父節(jié)點(diǎn)下，就可以啦。

<teleport to='#modal'>內(nèi)容</teleport>3.第一步優(yōu)化

如果我們?cè)诖a中將Teleport要掛載的DOM寫(xiě)死，那么每創(chuàng)建一個(gè)全局式組件，就需要有一個(gè)DOM節(jié)點(diǎn)，會(huì)越來(lái)越多，并且一直存在，這樣的寫(xiě)法不是很優(yōu)雅。比較好的解決方案就是：

在創(chuàng)建組件的時(shí)候，動(dòng)態(tài)創(chuàng)建一個(gè)dom節(jié)點(diǎn)document.createElement()， 并添加到body中，document.body.appendChild()， 在組件卸載的時(shí)候銷(xiāo)毀這個(gè)dom document.body.removeChild()，

setup(){ const node = document.createElement(’div’) node.id = ’modal’ document.body.appendChild(node) onUnmounted(() => { document.body.removeChild(node) })}4.第二步優(yōu)化

如果我們后續(xù)還要添加Message組件，Loading組件等功能，同樣要用到Teleport，在每一個(gè)組件內(nèi)部都寫(xiě)這么一段代碼，實(shí)在有點(diǎn)冗余，vue3使我們能夠很方便的將邏輯功能提取出來(lái)，從而達(dá)到邏輯復(fù)用的目的。

我們?cè)趕rc-hooks文件夾下創(chuàng)建useDOMCreate.ts文件，來(lái)封裝這一塊邏輯

// hooks/useDOMCreate.tsimport { onUnmounted } from ’vue’function useDOMCreate(nodeId:string):void { const node = document.createElement(’div’) node.id = nodeId document.body.appendChild(node) onUnmounted(() => { document.body.removeChild(node) })}export default useDOMCreate

使用：

import useDOMCreate from ’../hooks/useDOMCreate’setup(props, ctx) { useDOMCreate(’modal’)}5.實(shí)現(xiàn)Modal組件

具體封裝Modal組件的細(xì)節(jié)這里就不講啦，也沒(méi)有什么復(fù)雜的邏輯。直接上代碼。

//Modal.vue<template> <teleport to='#modal'> <div tabindex='-1' v-if='isVisible'> <div class='modal-dialog'><div class='modal-content'> <div class='modal-header'> <h5 class='modal-title'>{{title}}</h5> <button type='button' data-dismiss='modal' aria-label='Close'> <span aria-hidden='true' @click='onClose'>&times;</span> </button> </div> <div class='modal-body'> <slot></slot> </div> <div class='modal-footer'> <button type='button' data-dismiss='modal' @click='onClose'>取消</button> <button type='button' @click='onConfirm'>確定</button> </div></div> </div> </div> </teleport></template><script lang='ts'>import { defineComponent } from ’vue’import useDOMCreate from ’../hooks/useDOMCreate’export default defineComponent({ name: ’Modal’, emits: [’model-close’, ’model-confirm’], props: { title: { type: String, default: ’’ }, isVisible: { type: Boolean, default: false } }, setup(props, ctx) { useDOMCreate(’modal’) const onClose = () => { ctx.emit(’model-close’) } const onConfirm = () => { ctx.emit(’model-confirm’) } return { onClose, onConfirm } }})</script>

使用示例

<template> <div class='post-detail-page'> <button type='button' @click='handleDelete'>刪除</button> <modal title=’是否確認(rèn)刪除？’ :isVisible='modalVisible' @model-close='hanldeModalClose' @model-confirm='handleModalConfim'> <p>確認(rèn)要?jiǎng)h除這篇文章嗎？</p> </modal> </div></template><script lang='ts'>import { defineComponent, ref } from ’vue’import Modal from ’../components/Modal.vue’export default defineComponent({ name: ’post-detail’, components: { Modal }, setup() { const modalVisible = ref(false) const handleDelete = () => { modalVisible.value = true } const hanldeModalClose = () => { modalVisible.value = false } const handleModalConfim = () => { modalVisible.value = false ... / /后續(xù)邏輯處理 } return { hanldeModalClose, handleModalConfim, handleDelete, modalVisible } }})</script>

以上就是vue基于Teleport實(shí)現(xiàn)Modal組件的詳細(xì)內(nèi)容，更多關(guān)于vue Teleport實(shí)現(xiàn)Modal組件的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章！