この記事では、以下の内容を取り上げます。
テレポートの目的まず、テレポート機能をいつ、どのように使用するのかについて説明します。 大規模な 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 によって起動されたコンテナがハングしてデータが失われた場合の対処方法
目次1 システムの紹介2 システムショートカット3 一般的なシステムコマンド1 システムの紹介 1....
この記事では、Docker コンテナとフロントエンド プロセスの関係と、コンテナを永続的に実行できる...
序文Zabbix は最も主流のオープンソース監視ソリューションの 1 つです。導入自体は難しくありま...
チェーンプログラミングの実装原理jQuery を使用すると、開発者は常にドット構文を使用して独自のメ...
1. TypeScriptの紹介前回の記事ではTypeScriptのインストール、使い方、自動コンパ...
メインライブラリの構成1. MySQLを設定する vim /etc/my.cn # ファイルに次の内...
MySQL 8.0.22のダウンロード、インストール、設定方法、参考までに具体的な内容は次のとおりで...
<br />内容はインターネットから転載したものです。どこから見つけたのか忘れてしまいま...
コードをコピーコードは次のとおりです。 <object classid="clsid...
一部の障害コード テーブルでは、履歴またはパフォーマンス上の理由から、次の設計パターンが使用されます...
序文: MySQL で SQL 文を実行すると、予想した時間内に文が完了しません。このような場合、通...
ステップ 1: メモ帳を使用して、MySQL インストール ディレクトリの「my.ini」ファイルを...
MySQL パスワードを忘れた場合の解決策: [root@localhost ~]# mysql -...
ミラーを探すDocker Hubのウェブサイトからイメージを検索できます。Docker Hubのウェ...
この記事では、jQueryプラグインを使用してマインスイーパゲームを実装する方法に関する3番目の記事...