Vue.js v2のteleportの使い方

2021年4月12日Vue.js

Vue.jsのteleportの使い方をまとめました。

teleportの使い方

teleportを使うことで、index.htmlでmountしている場所と異なる場所に指定したコンポーネントを出力することができます。

    <div id="app"></div>
    <!-- built files will be auto injected -->
    <div class="modals"></div>

通常の#appでmountしているApp.vueのコンポーネントをteleportを使ってmodalsクラスの中に出力されるように設定したいとします。
その場合、
App.vueの中のコンポーネントから、modalsクラスの中に出力したいものを選択します。
そのタグを、たとえばdivタグならそれをteleportタグに書き換えます。
そして、to属性を指定します。今回の場合modalsクラスなのでto=".modals"とします。

<template>
<!-- こちらをテレポートさせる -->
  <teleport to=".modals" v-if="showModal">
    <Modal theme="sale" @close="toggleModal">
      <template v-slot:links>
        <a href="#">サインイン</a>
        <a href="#">もっと詳しく</a>
      </template>
      <h1>タイトル</h1>
      <p>サブタイトル</p>
    </Modal>
  </teleport>
  <!-- こちらは通常通り#appに出力する -->
  <div v-if="showModalTwo">
    <Modal @close="toggleModalTwo">
      <p>これが作成したボタン２</p>
      <h1>タイトル</h1>
      <p>サブタイトル</p>
    </Modal>
  </div>
  <button @click.shift="toggleModal">Open Modal(shift)</button>
  <button @click.alt="toggleModalTwo">Open ModalTwo(alt)</button>
</template>

<template>
  <!-- 通常通り#appに出力する -->
  <div v-if="showModal">
    <Modal theme="sale" @close="toggleModal">
      <template v-slot:links>
        <a href="#">サインイン</a>
        <a href="#">もっと詳しく</a>
      </template>
      <h1>タイトル</h1>
      <p>サブタイトル</p>
    </Modal>
  </div>
  <!-- 通常通り#appに出力する -->
  <div v-if="showModalTwo">
    <Modal @close="toggleModalTwo">
      <p>これが作成したボタン２</p>
      <h1>タイトル</h1>
      <p>サブタイトル</p>
    </Modal>
  </div>
  <button @click.shift="toggleModal">Open Modal(shift)</button>
  <button @click.alt="toggleModalTwo">Open ModalTwo(alt)</button>
</template>

出力先は上の例ではmodalsクラスですが、idでも可能です。