VUE 3のは、現(xiàn)在のコンポーネントDOM構(gòu)造の外側(cè)のコンテンツをレンダリングするために使用されます。 1.モーダルボックスなどの要素を移動したり、ページ上の他の場所にツールを促したり、レイアウトの問題、Zインデックス階層、アクセシビリティの問題を解決したりできます。 2。それを使用する場合、ターゲットコンテンツをラップし、などのターゲットセレクターを指定する必要があります。 3. Vueは、応答性とイベントロジックを維持しながら、対応するDOMノードを指定された場所に物理的に移動します。 4.一般的なアプリケーションシナリオには、モーダルボックス、通知メッセージ、ツールチップ、バリアフリーコンテンツが含まれます。 5.それを使用する場合、ターゲット要素が既に存在することを確認(rèn)し、スタイルの範(fàn)囲と動的ロジック処理に注意を払う必要があります。要するに、は仮想?yún)⒄栅蚪椁筏匹偿螗荸`ネントツリーの論理的な関係を維持し、複雑なUIに簡潔なソリューションを提供します。

VUE 3では、 <teleport></teleport> 、現(xiàn)在のコンポーネントのDOM構(gòu)造の外側(cè)にコンテンツをレンダリングする必要がある場合に重要な役割を果たします。これは、ページ內(nèi)の他の場所にモーダルまたはツールチップを表示したい場合、レンダリングされたコンポーネントツリーの一部ではない場合でも。以前は、VUE 2エコシステムのPortalvueと呼ばれる別のライブラリでしたが、今ではVUE 3に造られています。

<teleport></teleport>は実際に何をしますか？

そのコアでは、 <teleport></teleport>テンプレートの一部をDOMの別の場所に移動できます。これは、親コンテナ（特にoverflow: hiddenまたはz-index問題。

テレポートするコンテンツをラップし、ターゲットセレクターを指定することにより、使用します。

 <テレポートto = "＃modal-rot">
  <div class = "modal">これは＃modal-root </div>內(nèi)部に表示されます
</テレポート>

舞臺裏で、Vueはコンポーネントの外側(cè)にそのdo??mノードを移動し、反応性やイベント処理を壊すことなく、それを指示した場所に追加します。

テレポートの一般的なユースケース

• モーダルとオーバーレイ：これらは、すべてをカバーできるように、ページの上位レベルに座る必要があることがよくあります。
• ツールチップとポップアップ：特に、內(nèi)部のスクロールコンテナ內(nèi)にネストされている場合に便利です。
• 通知またはトーストメッセージ：それらがどこからトリガーされているかに関係なく、これらをページの専用領(lǐng)域に表示することを望むかもしれません。
• アクセシビリティ関連のコンテンツ：特定の場所に住む必要があるリンクやスクリーンリーダーのみのテキストのスキップなど。

これらはすべて、コンポーネントの內(nèi)部をレンダリングすると、レイアウトの問題、Zインデックスの頭痛、またはアクセシビリティスナッグを引き起こす?fàn)顩rです。

それがフードの下でどのように機能するか

<teleport></teleport>を使用すると、VueはDOMを移動するだけではありません。コンポーネントへの論理的な接続を保持します。つまり、

• データバインディングは依然として正常に機能します。
• 予想どおりにイベントバブル（ネイティブDOMイベントには注意してください）。
• <teleport></teleport>內(nèi)部のコンポーネントは、取り付けられたままでリアクティブです。

これは、実際のDOMを他の場所にレンダリングしながら、元の場所に仮想?yún)⒄栅虮３证工毪长趣切肖い蓼?。視覚的には、新しい場所にありますが、Vueの観點からは、コンポーネントツリーの一部です。

注意すべきことの1つは、JavaScriptを介して親子のDOM関係をチェックするようなことをしている場合、実際のDOMはコンポーネントツリーがどのように見えるかと一致しません。それは通常大丈夫ですが、それは気づく価値があります。

<teleport></teleport>効果的に使用するためのヒント

• テレポートされたコンテンツがレンダリングを試みる前に、ターゲット要素（ #modal-rootなど）が存在することを確認(rèn)してください。そうでなければ、Vueはコンソールで警告します。
• 複數(shù)のコンポーネントを同じターゲットにテレポートできます。レンダリングされた順序で積み重ねます。
• 必要でない限り、ダイナミックキーや條件付きロジックを<teleport></teleport>內(nèi)部に置くことは避けてください。タイミングとクリーンアップを複雑にする可能性があります。
• スタイルテレポートされたコンテンツは慎重に - コンポーネントの外に住んでいるため、CSSモジュールまたはスコープスタイルは予想どおり適用されない場合があります。

また、 <teleport></teleport>コンポーネントライフサイクルに影響しないことに注意してください。テレポート內(nèi)のコンポーネントは、アプリロジックに基づいてまだマウントされ、アンマウントはマウントされます。DOM位置のみが変更されます。

基本的にそれだけです。それを手に入れると、 <teleport></teleport> 、ハッキングなしでトリッキーなUIパターンを管理するための頼りになるツールになります。

以上が現(xiàn)在のコンポーネントのDOM階層の外側(cè)のコンテンツをレンダリングするためのVUE 3での（以前のPortalvue）の役割は何ですか？の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。