この記事では、以下の内容を取り上げます。
テレポートの目的まず、テレポート機能をいつ、どのように使用するのかについて説明します。 大規模な Vue プロジェクトを開発する場合は、コードを再利用可能なロジックに整理する必要があります。ただし、モーダル、通知、ツールチップなどの特定の種類のコンポーネントを扱う場合、テンプレート HTML のロジックは、レンダリングされる要素が必要なファイルと同じファイルにない可能性があります。 実際、ほとんどの場合、Vue の完全に独立した DOM を使用するよりも、これらの要素を処理する方がはるかに簡単です。ネストされたコンポーネントの位置、z-index、スタイルなどは、すべての親のスコープに対処する必要があるため、複雑になることがあります。 ここでテレポートが役立ちます。ロジックが配置されているコンポーネントにテンプレート コードを記述すると、コンポーネントのデータやプロパティを使用できるようになります。 Teleport がなければ、子コンポーネントから DOM ツリーにロジックを渡すためのイベント伝播についても考慮する必要があります。 テレポートの仕組み通知ポップアップをトリガーする子コンポーネントがあるとします。先ほど説明したように、通知が Vue のルート #app 要素ではなく、完全に別の DOM ツリーでレンダリングされる方がはるかに簡単になります。 まず、index.html を編集し、</body> の前に <div> を追加します。 //インデックス.html <本文> <div id="アプリ"></div> <div id='ポータルターゲット'></div> </本文> 次に、レンダリング通知をトリガーするコンポーネントを作成します。 //Vueポータル.vue <テンプレート> <div class='ポータル'> <button @click='showNotification'> 通知をトリガーします! </button> <テレポート先='#portal-target'> <div クラス = '通知'> これは、この子コンポーネントの外部でレンダリングされます。 </div> </テレポート> </div> </テンプレート> <スクリプト> 'vue' から { ref } をインポートします エクスポートデフォルト{ 設定 () { 定数isOpen = ref(false) var ポップアップを閉じる const showNotification = () => { isOpen.値 = true タイムアウトをクリア(ポップアップを閉じる) closePopup = setTimeout(() => { isOpen.値 = false }, 2000) } 戻る { 開いている、 通知を表示 } } } </スクリプト> <スタイルスコープ> 。通知 { フォントファミリー: myriad-pro、sans-serif; 位置: 固定; 下: 20px; 左: 20px; 幅: 300ピクセル; パディング: 30px; 背景色: #fff; } </スタイル> このコード スニペットでは、ボタンが押されると、通知が 2 秒間表示されます。しかし、私たちの主な目標は、Teleport を使用して通知を取得し、VUE プログラム外でレンダリングすることです。 ご覧のとおり、Teleportには必須の属性が1つあります。 to 属性には、次のような有効な DOM クエリ文字列を指定します。
#portal-target でコードを渡したので、Vue プログラムは index.html に含めた #portal-target div を見つけ、ポータル内のすべてのコードを渡してその div でレンダリングします。 結果は次のとおりです。 要素を検査して DOM を見ると、何が起こっているのかがかなり明確にわかります。 VuePortals コンポーネントのすべてのロジックを使用できますが、どのテンプレート コードを別の場所にレンダリングするかをプロジェクトに指示する必要があります。 以上がVue3のTeleportの詳しい説明です。Vue3のTeleportについてさらに詳しく知りたい方は、123WORDPRESS.COMの関連記事もぜひご覧ください! 以下もご興味があるかもしれません:
|
>>: docker run によって起動されたコンテナがハングしてデータが失われた場合の対処方法
この記事の例では、Vue Element UIカスタム説明リストコンポーネントの具体的なコードを参考...
序文MySQL データのインポートとエクスポートは mysqldump コマンドで解決できることは誰...
導入Binlog ログ、つまりバイナリ ログ ファイルは、データベースに対するユーザー操作の SQL...
MySQL の運用と保守において、R&D の同僚が 2 つの異なるインスタンスのデータを比較...
仕える: # chkconfig --list すべてのシステム サービスを一覧表示します # ch...
1. LinuxサーバーのDocker構成ファイルを変更する vim /usr/lib/system...
最初の方法: Junge のワンクリック スクリプトを使用して、LNMP 環境で MYSQL データ...
Vueベースこの機能の核となるアイデアは、JavaScript コードを通じてページ上のノードの左余...
ポート マッピングは、Docker を別のコンテナーに接続する唯一の方法ではありません。 Docke...
相対幅と絶対幅が競合する場合のdivソリューション概要: 一般的に、絶対幅を使用する場合は px を...
例示するシステムを自分でインストールする場合は、通常、システム言語をカスタマイズできます。ただし、ク...
今日の開発環境では、速いほど良いです。 「迅速なアプリケーション開発」、「アジャイル ソフトウェア開...
目次父から息子へ息子から父へクロスレベルコンポーネント(親から子孫)父から息子へpropsを通じて値...
最近、MySQL オンラインでいくつかのデータ異常が発生しましたが、すべて早朝に発生しました。ビジネ...
多くの場合、大規模および中規模の Web サイトでは、静的リソース (フォント ファイル、画像など)...