vue3新增Teleport

在開始介紹Teleport之前先了解一下React的Portals特性。

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

ReactDOM.createPortal(child, container)

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

通常來講，當你從組件的 render 方法返回一個元素時，該元素將被掛載到 DOM 節(jié)點中離其最近的父節(jié)點：

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

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

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

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

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

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

vue3 Teleport和插件的認識與了解

一、認識Teleport

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

• 那么組件A中template的元素，會被掛載到組件B中template的某個位置
• 最終我們的應用程序會形成一顆DOM樹結構

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

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

Teleport是什么呢？

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

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

二、和組件結合使用

當然，teleport也可以和組件結合一起來使用

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

三、多個teleport

如果我們將多個teleport應用到同一個目標上（to的值相同），那么這些目標會進行合并

四、認識Vue插件

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

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

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

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

五、插件的編寫方式

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

對象類型的寫法

函數(shù)類型的寫法

在main.js中通過use使用這兩個插件

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

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

最新評論