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 ノードに移動することで、スタイルをより制御し、親要素に不明な影響を与えることがありません。