Vue3のPortal-Teleport

React のフロントエンド開発者にとって、portalsポータルはかなり馴染みのあるものであり、ノードを親コンポーネント以外のノードにレンダリングすることができます。

このようにノードを任意の位置にレンダリングする機能は、カスタムコンポーネントを開発する際に非常に便利です。特にモーダルコンポーネントやポップアップレイヤーコンポーネントなどでは、一部のコンテンツをbodyにマウントすることで、ロジックをより明確にし、親要素の影響を受けずに親要素のスタイル調整を柔軟に行うことができます。

しかし、Vue では似たような機能が常に存在せず、サードパーティのライブラリを使用する必要がありました。しかし、Vue3 では新しい組み込みコンポーネントTeleportが導入されました - 私はそれをテレポートパネルと呼んでいます（誤解

テレポートオンライン！

使用法#

組み込みのTeleportコンポーネントは、Transition、KeepAliveと同様に、任意の Vue3 プロジェクトで使用できます。以下のように使用します。

const app = Vue.createApp({
  name: 'test',
  template: `
    <div class="text">
      <div>Hello World</div>
      <teleport to="body">
        <span>this is teleport</span>
      </teleport>
    </div>
  `,
})
const vm = app.mount('#app')

次のような構造にレンダリングされます。

<body>
  <div id="app" data-v-app="">
    <div class="text">
      <div>Hello World</div>
      <!--teleport start-->
      <!--teleport end-->
    </div>
  </div>

  <span>this is teleport</span>
</body>

コンポーネントのプロパティ#

Teleportコンポーネントには、to と disabled の 2 つのプロパティがあります。

to は必須であり、クエリセレクタまたは HTMLElement を指定するために使用されます。この属性は:、v-bindで修飾することができ、パラメータの変更によって転送先が変化し、実際の DOM を移動するため、要素の状態も保存されます。

disabled はオプションであり、機能を無効にするために使用されます。true の場合、コンテンツは to で指定された場所に移動しません。disabled 属性を制御することで、デフォルトのスロットコンテンツを柔軟に操作することができます。また、to と同様に動的に変更されるため、実際の DOM を移動します。

より詳細な用途#

実際には、Portalと同様に、多くの用途が同じですが、Teleportの方がより制御が容易で、Vue のテンプレート構文に適しています。

このようなコンテンツを移動できる機能を使用することで、統一的に制御できる Popover タイプのコンポーネントをより簡単にカプセル化することができます。コンポーネントのコンテンツを body ノードに移動することで、スタイルをより制御し、親要素に不明な影響を与えることがありません。