vue.js3の<Teleport>について簡単なサンプルコードで解説
9 回閲覧されました
みなさんこんにちは、jonioです。
今回はvue.js3から登場している<Teloport>について解説します。
Laravelの無料学習サイトを作りました
Laravelをこれから勉強したい人向けの無料の学習サイトを作りました。
ここからリンクに飛べますのでぜひ利用してください。
<Teleport>とは
あるコンポーネントのテンプレートの一部を、実際のDOM上では別の場所へ描画する仕組みです。
よくある用途はモーダルやドロップダウンをbody直下に出してz-indexやoverflowなどのcssの干渉を回避したり「<Transition>」タグの影響を回避したい時に使います。
サンプルコードで理解を深めます。
サンプルコード
下記のコードで考えます。
<template>
<button @click="open = true">開く</button>
<Teleport to="body">
<div v-if="open" class="backdrop" @click="open = false">
<div class="modal" @click.stop>
<h2>モーダル</h2>
<p>ここに内容</p>
<button @click="open = false">閉じる</button>
</div>
</div>
</Teleport>
</template>
<script setup>
import { ref } from 'vue'
const open = ref(false)
</script>
<style scoped>
.backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.4); display:grid; place-items:center; }
.modal { background:#fff; padding:16px; border-radius:8px; min-width:240px; }
</style>4行目にTeleportを使っています。
「to=”body”」はTeleportタグの中身(5行目〜11行目)を配置する場所を指定しています、この場合はbodyタグの直下という意味です。
通常はbuttonタグの下に配置されるのをTeleportタグを使うことで配置場所を変更できます。
配置する場所の指定方法ですが他の記述方法もあります。
例えば下記になります。
// HTMLに下記の記述をする
<div id="modals"></div>
<div class="sidebar"></div>
// vue.jsに下記の記述をする
<Teleport to="#modals">
<MyModal />
</Teleport>
<Teleport to=".sidebar">
<MiniWidget />
</Teleport>7行目は「id=”modals”」の直下に配置されて11行目は「class=”sidebar”」の直下に配置されるといった感じです。