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