Vue 3 Chapter 16: コンポーネント 5 (組み込みコンポーネント - テレポート)

1. Teleport コンポーネントの基本的な使い方

<teleport>コンポーネントは、コンポーネント自体の位置ではなく、指定された DOM 要素にコンポーネントのコンテンツを挿入するために使用されます。たとえば、ポップアップでコンポーネントをレンダリングする必要がある場合、to属性を使用して、挿入する DOM 要素のセレクター (ID セレクター、クラス セレクター、タグ セレクターなど) を指定できます。基本的な使い方は以下の通りです。

<template>
  <div>
    <button @click="show = !show">Toggle</button>
    <teleport to="body">
      <div v-if="show" class="modal">
        <h2>{
   
   { title }}</h2>
        <p>{
   
   { content }}</p>
      </div>
    </teleport>
  </div>
</template>

<script setup lang="ts">
import {
      
       ref } from 'vue';

const show = ref(false)
const title = ref('Hello, World!')
const content = ref('This is a modal window.')

</script>

<style scoped>
.modal {
      
      
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  padding: 1rem;
  border: 1px solid black;
}
</style>

上記のコードでは、コンポーネントを使用して要素に要素<teleport>を挿入しています。ボタンをクリックすると、要素はという名前のスタイルを表示し、ページの中央に配置されます。<div>bodyToggle<div>modal

2. Teleport コンポーネントの高度な使用法

2.1. テレポートを無効にする

一部のシナリオでは、必要に応じて無効にする必要がある場合があります <Teleport>。<Teleport>prop を動的に渡すことで、disabledこれら 2 つの異なるケースを処理できます。

  <Teleport to="#modal" :disabled="!showModal">
    <Modal v-if="showModal" @close="showModal = false" />
  </Teleport>

上記のコードでは、disabledプロパティを使用してTeleportコンポーネントの挿入と削除を無効にしています。具体的には、 がshowModalのfalse場合、Teleportコンポーネントが無効になり、Modalコンポーネントが指定されたDOM要素に挿入されなくなります。

2.2. 複数のテレポート コンポーネントがターゲット要素を共有する

再利用可能なモーダル コンポーネントは、同時に複数のインスタンスを持つことができます。このタイプのシナリオでは、複数の<Teleport>コンポーネントがそのコンテンツを同じターゲット要素にマウントできます。順序は単純に順次追加され、後でマウントされたものはターゲット要素の下の後の位置に配置されます。

たとえば、次の使用例があります。

<Teleport to="#modals">
  <div>A</div>
</Teleport>
<Teleport to="#modals">
  <div>B</div>
</Teleport>

レンダリングされた結果は次のとおりです。

<div id="modals">
  <div>A</div>
  <div>B</div>
</div>