Vue3 の便利な機能であるテレポートについて話しましょう

ve3 の新機能は、しばらくの間議論されてきました。 Portals (ポータル) です。その機能は、テンプレート HTML を別の DOM ローカルに移動することです。方法。 Portals は React の一般的な機能であり、portal-vue ライブラリは Vue2 で使用できます。 (学習ビデオ共有: vue ビデオ チュートリアル )

Vue3 は、この機能をサポートする Teleport を提供します。

テレポートの目的

最初に理解する必要があるのは、テレポート機能をいつ使用するかということです。

大規模な Vue プロジェクトを扱う場合は、コード ベースを論理的に編成する方法が重要です。ただし、モーダル、通知、プロンプトなどの特定の種類のコンポーネントを処理する場合、テンプレート HTML のロジックが、要素をレンダリングする場所とは異なるファイルに存在する可能性があります。

実際、多くの場合、これらの要素は、Vue アプリケーションの DOM から完全に分離して処理すると、管理がはるかに簡単になります。これはすべて、ネストされたコンポーネントの位置、z-index、およびスタイルの処理が、すべての親のスコープを処理するため難しい場合があるためです。

ここで、テレポートが役立ちます。ロジックがあるコンポーネントにテンプレート コードを記述することができます。つまり、コンポーネントのデータまたは props を使用できます。ただし、この場合、Vue アプリケーションの範囲外で完全にレンダリングされます。

Teleport を使用しない場合は、子コンポーネントから DOM ツリーにロジックを渡すイベントの伝播について心配する必要がありましたが、今ではそれがはるかに簡単になりました。

Vue Teleport の仕組み

ポップアップ通知をトリガーしたい子コンポーネントがいくつかあるとします。先ほど説明したように、通知が Vue のルート #app 要素ではなく、完全に別個の DOM ツリーにレンダリングされると、より簡単になります。

最初に行う必要があるのは、index.html を開き、

以上がVue3 の便利な機能であるテレポートについて話しましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。