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 によって起動されたコンテナがハングしてデータが失われた場合の対処方法

推薦する

Linux の一般的なコマンドとショートカット キーの紹介

目次1 システムの紹介2 システムショートカット3 一般的なシステムコマンド1 システムの紹介 1....

Dockerコンテナの自動終了を停止する方法の詳細な説明

この記事では、Docker コンテナとフロントエンド プロセスの関係と、コンテナを永続的に実行できる...

Zabbixのインストールと展開の詳細な説明

序文Zabbix は最も主流のオープンソース監視ソリューションの 1 つです。導入自体は難しくありま...

jQueryのチェーンプログラミングスタイルの詳細な例

チェーンプログラミングの実装原理jQuery を使用すると、開発者は常にドット構文を使用して独自のメ...

TypeScript をインストール、使用、自動コンパイルする方法に関するチュートリアル

1. TypeScriptの紹介前回の記事ではTypeScriptのインストール、使い方、自動コンパ...

MySQL マスタースレーブレプリケーション構成プロセス

メインライブラリの構成1. MySQLを設定する vim /etc/my.cn # ファイルに次の内...

MySQL 8.0.22.0 のダウンロード、インストール、設定方法のグラフィックチュートリアル

MySQL 8.0.22のダウンロード、インストール、設定方法、参考までに具体的な内容は次のとおりで...

Web デザイン ヘルプ: Web フォント サイズ データ リファレンス

<br />内容はインターネットから転載したものです。どこから見つけたのか忘れてしまいま...

Firefox で Flash を再生するためのオブジェクトとパラメータの書き方

コードをコピーコードは次のとおりです。 <object classid="clsid...

特定のシンボルで複数の行と列に分割するMySQLの例

一部の障害コード テーブルでは、履歴またはパフォーマンス上の理由から、次の設計パターンが使用されます...

mysql MDLメタデータロックの詳細な分析

序文: MySQL で SQL 文を実行すると、予想した時間内に文が完了しません。このような場合、通...

Windows システムの MySQL が中国語を入力および表示できない問題の解決方法

ステップ 1: メモ帳を使用して、MySQL インストール ディレクトリの「my.ini」ファイルを...

MySQLのパスワードを忘れた場合の対処方法

MySQL パスワードを忘れた場合の解決策: [root@localhost ~]# mysql -...

Dockerとイメージの操作方法

ミラーを探すDocker Hubのウェブサイトからイメージを検索できます。Docker Hubのウェ...

マインスイーパゲームを実装するための jQuery プラグイン (3)

この記事では、jQueryプラグインを使用してマインスイーパゲームを実装する方法に関する3番目の記事...