快捷導(dǎo)航

vue3新增Teleport的問(wèn)題

更新時(shí)間：2022年08月16日 09:32:33 作者：前端精髓

這篇文章主要介紹了vue3新增Teleport的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue3新增Teleport

在開(kāi)始介紹Teleport之前先了解一下React的Portals特性。

Portal 提供了一種將子節(jié)點(diǎn)渲染到存在于父組件以外的 DOM 節(jié)點(diǎn)的優(yōu)秀的方案。

ReactDOM.createPortal(child, container)

第一個(gè)參數(shù)（child）是任何可渲染的 React 子元素，例如一個(gè)元素，字符串或 fragment。第二個(gè)參數(shù)（container）是一個(gè) DOM 元素。

通常來(lái)講，當(dāng)你從組件的 render 方法返回一個(gè)元素時(shí)，該元素將被掛載到 DOM 節(jié)點(diǎn)中離其最近的父節(jié)點(diǎn)：

render() {
? // React 掛載了一個(gè)新的 div，并且把子元素渲染其中
? return (
? ? <div>
? ? ? {this.props.children}
? ? </div>
? );
}

然而，有時(shí)候?qū)⒆釉夭迦氲?DOM 節(jié)點(diǎn)中的不同位置也是有好處的：

render() {
? // React 并*沒(méi)有*創(chuàng)建一個(gè)新的 div。它只是把子元素渲染到 `domNode` 中。
? // `domNode` 是一個(gè)可以在任何位置的有效 DOM 節(jié)點(diǎn)。
? return ReactDOM.createPortal(
? ? this.props.children,
? ? domNode
? );
}

一個(gè) portal 的典型用例是當(dāng)父組件有 overflow: hidden 或 z-index 樣式時(shí)，但你需要子組件能夠在視覺(jué)上“跳出”其容器。例如，對(duì)話框、懸浮卡以及提示框。常見(jiàn)的情況是創(chuàng)建一個(gè)包含全屏模式的組件。

對(duì)話框 position: absolute 的定位相對(duì)于父 div 作為參考。Teleport 提供了一種簡(jiǎn)單的方法，使我們可以控制要在DOM中哪個(gè)父對(duì)象下呈現(xiàn)HTML。

<teleport to="#modals">
? <div>A</div>
</teleport>
<teleport to="#modals">
? <div>B</div>
</teleport>
<!-- result-->
<div id="modals">
? <div>A</div>
? <div>B</div>
</div>

多個(gè) <teleport> 組件可以將其內(nèi)容添加到同一目標(biāo)元素。

vue3 Teleport和插件的認(rèn)識(shí)與了解

一、認(rèn)識(shí)Teleport

在組件化開(kāi)發(fā)中，我們封裝一個(gè)組件A，在另外一個(gè)組件B中使用

那么組件A中template的元素，會(huì)被掛載到組件B中template的某個(gè)位置
最終我們的應(yīng)用程序會(huì)形成一顆DOM樹(shù)結(jié)構(gòu)

但是某些情況下，我們希望組件不是掛載在這個(gè)組件樹(shù)上的，可能是移動(dòng)到Vue app之外的其他位置

比如移動(dòng)到body元素上，或者我們有其他的div#app之外的元素上
這個(gè)時(shí)候我們就可以通過(guò)teleport來(lái)完成

Teleport是什么呢？

它是一個(gè)Vue提供的內(nèi)置組件，類似于react的Portals
teleport翻譯過(guò)來(lái)是心靈傳輸、遠(yuǎn)距離運(yùn)輸?shù)囊馑?/li>
它有兩個(gè)屬性
to：指定將其中的內(nèi)容移動(dòng)到的目標(biāo)元素，可以使用選擇器
disabled：是否禁用 teleport 的功能

我們來(lái)看下面代碼的效果：

二、和組件結(jié)合使用

當(dāng)然，teleport也可以和組件結(jié)合一起來(lái)使用

我們可以在 teleport 中使用組件，并且也可以給他傳入一些數(shù)據(jù)

三、多個(gè)teleport

如果我們將多個(gè)teleport應(yīng)用到同一個(gè)目標(biāo)上（to的值相同），那么這些目標(biāo)會(huì)進(jìn)行合并

四、認(rèn)識(shí)Vue插件

通常我們向Vue全局添加一些功能時(shí)，會(huì)采用插件的模式，它有兩種編寫方式

對(duì)象類型：一個(gè)對(duì)象，但是必須包含一個(gè) install 的函數(shù)，該函數(shù)會(huì)在安裝插件時(shí)執(zhí)行
函數(shù)類型：一個(gè)function，這個(gè)函數(shù)會(huì)在安裝插件時(shí)自動(dòng)執(zhí)行

插件可以完成的功能沒(méi)有限制，比如下面的幾種都是可以的