vue3新增Teleport

在開始介紹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 元素。

通常來講，當(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 并*沒有*創(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í)，但你需要子組件能夠在視覺上“跳出”其容器。例如，對話框、懸浮卡以及提示框。常見的情況是創(chuàng)建一個(gè)包含全屏模式的組件。

對話框 position: absolute 的定位相對于父 div 作為參考。Teleport 提供了一種簡單的方法，使我們可以控制要在DOM中哪個(gè)父對象下呈現(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)識與了解

一、認(rèn)識Teleport

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

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

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

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

Teleport是什么呢？

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

我們來看下面代碼的效果：

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

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

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

三、多個(gè)teleport

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

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

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

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

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

• 添加全局方法或者 property，通過把它們添加到 config.globalProperties 上實(shí)現(xiàn)
• 添加全局資源：指令/過濾器/過渡等
• 通過全局 mixin 來添加一些組件選項(xiàng)
• 一個(gè)庫，提供自己的 API，同時(shí)提供上面提到的一個(gè)或多個(gè)功能

五、插件的編寫方式

這里編寫兩個(gè)插件示例，看一下怎么寫和用

對象類型的寫法

函數(shù)類型的寫法

在main.js中通過use使用這兩個(gè)插件

然后就可以在全局使用$name屬性了

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。 

最新評論