Teleportコンポーネントとは何ですか？

Question

Accepted Answer

`` は、コンポーネントツリー内で宣言された場所とは**異なる場所の DOM**にコンポーネントのマークアップをレンダリングします。ただし、コンポーネントの一部としての論理的な関係は保たれます（リアクティビティ、props、イベントはすべて機能します）。 ## なぜ重要なのかモーダル、ツールチップ、通知は CSS の問題を避けるため、通常 `` の**直接の子**である必要があります。親の `overflow: hidden`、`transform`、または `z-index` スタッキングコンテキストがモーダルをクリップしたり、レイアリングを間違える可能性があるためです。ただし、論理的には、モーダルはそれをトリガーするコンポーネントに属しています。 ## Teleport の使用 ```vue ``` モーダルマークアップは実際の DOM で `` の子に**移動**され、クリッピング/スタッキングの親を逃れます。しかし `open`、`@click`、およびすべての props は完全にリアクティブなままです。論理的にはまだこのコンポーネントの一部であるためです。 ## なぜ「to body」がレイアウトバグを修正するのか ```text Without Teleport: With Teleport to="body":

... ← clipped/trapped ← free, on top of everything ``` トラップされた祖先から逃げることで、モーダルは確実にビューポート全体をカバーでき、予測可能な `z-index` を持つすべてのコンテンツの上に配置できます。 ## ターゲットは任意のセレクターにできます ```vue ... ... ``` ## なぜ重要なのか Teleport は、オーバーレイ（モーダル、ツールチップ、トースト、ドロップダウン）が DOM 祖先によってクリップされたり、誤ってレイアリングされたりする古典的な CSS 問題をクリーンに解決します。オーバーレイを論理的に属する場所（トリガーコンポーネント内、完全なリアクティビティを備えた）で作成し、DOM 内で必要とされる場所（通常は ``）でレンダリングできます。これは React ポータルの Vue 組み込み同等物です。オーバーレイ UI を構築するための標準的で堅牢な方法です。