Vue3 での Teleport の使用に関する詳細な説明

Vue3 での Teleport の使用に関する詳細な説明

この記事では、以下の内容を取り上げます。

  • テレポートの目的
  • テレポートの例
  • 興味深いコードの相互作用

テレポートの目的

まず、テレポート機能をいつ、どのように使用するのかについて説明します。

大規模な 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 クエリ文字列を指定します。

  • 要素のID
  • 要素のクラス
  • データセレクター
  • 応答クエリ文字列

#portal-target でコードを渡したので、Vue プログラムは index.html に含めた #portal-target div を見つけ、ポータル内のすべてのコードを渡してその div でレンダリングします。

結果は次のとおりです。

要素を検査して DOM を見ると、何が起こっているのかがかなり明確にわかります。

VuePortals コンポーネントのすべてのロジックを使用できますが、どのテンプレート コードを別の場所にレンダリングするかをプロジェクトに指示する必要があります。

以上がVue3のTeleportの詳しい説明です。Vue3のTeleportについてさらに詳しく知りたい方は、123WORDPRESS.COMの関連記事もぜひご覧ください!

以下もご興味があるかもしれません:
  • Vue3の組み込みコンポーネントであるTeleportの使い方を詳しく説明します
  • Vue3 Teleportの実践と原理の詳細な説明
  • vue3のテレポート瞬間移動機能の使い方を詳しく解説
  • vue2 で vue3 のテレポートを実装する方法

<<:  Centos7.5でのIPアドレス設定の実装

>>:  docker run によって起動されたコンテナがハングしてデータが失われた場合の対処方法

推薦する

Vue Element UI カスタム説明リストコンポーネント

この記事の例では、Vue Element UIカスタム説明リストコンポーネントの具体的なコードを参考...

DockerコンテナでのMySQLデータのインポート/エクスポートの詳細な説明

序文MySQL データのインポートとエクスポートは mysqldump コマンドで解決できることは誰...

Centos7はMySQLログに基づいてデータを復元するためのサンプルコードを実装します

導入Binlog ログ、つまりバイナリ ログ ファイルは、データベースに対するユーザー操作の SQL...

MySQL クイックデータ比較テクニック

MySQL の運用と保守において、R&D の同僚が 2 つの異なるインスタンスのデータを比較...

Linuxターミナルでの一般的なMySQL操作コマンドの詳細な説明

仕える: # chkconfig --list すべてのシステム サービスを一覧表示します # ch...

IdeaはリモートDockerをデプロイし、ファイルを構成する

1. LinuxサーバーのDocker構成ファイルを変更する vim /usr/lib/system...

lnmp を使用して MySQL データベースのルート パスワードをリセットする 2 つの方法

最初の方法: Junge のワンクリック スクリプトを使用して、LNMP 環境で MYSQL データ...

HTML ドラッグ アンド ドロップ機能の実装コード

Vueベースこの機能の核となるアイデアは、JavaScript コードを通じてページ上のノードの左余...

Dockerコンテナの接続と通信の実装

ポート マッピングは、Docker を別のコンテナーに接続する唯一の方法ではありません。 Docke...

相対幅と絶対幅が競合する場合の HTML+CSS div ソリューション

相対幅と絶対幅が競合する場合のdivソリューション概要: 一般的に、絶対幅を使用する場合は px を...

Centos7のシステム言語を簡体字中国語に変更する方法

例示するシステムを自分でインストールする場合は、通常、システム言語をカスタマイズできます。ただし、ク...

Web アプリ開発時間を短縮する 10 の時間を節約するヒント (グラフィカル チュートリアル)

今日の開発環境では、速いほど良いです。 「迅速なアプリケーション開発」、「アジャイル ソフトウェア開...

React Hooksコンポーネント間で値を渡す方法の詳細な説明(tsを使用)

目次父から息子へ息子から父へクロスレベルコンポーネント(親から子孫)父から息子へpropsを通じて値...

MySQLのデッドロックとログに関する詳細な説明

最近、MySQL オンラインでいくつかのデータ異常が発生しましたが、すべて早朝に発生しました。ビジネ...

Apache クロスドメイン リソース アクセス エラーの解決策

多くの場合、大規模および中規模の Web サイトでは、静的リソース (フォント ファイル、画像など)...