Vue.js v2のteleportの使い方
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"とします。
App.vue(teleportあり)
<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>App.vue(teleportなし)
<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でも可能です。