Vue3 - teleport

📌 목차

• Introduction
• What is teleport?
• Usage
• Conclusion
• Reference

📌 Introduction

안녕하세요. 이번에는 teleport에 대해서 알아보겠습니다. 해당 코드는 여기서 확인할 수 있습니다.

📌 What is teleport?

teleport는 vue2에서 vue-teleport와 똑같습니다. 문서에서는 주로 modal을 사용할때 쓴다고 하네요.

<template>
  <!-- ok -->
  <teleport to="#some-id" />
  <teleport to=".some-class" />
  <teleport to="[data-teleport]" />

  <!-- Wrong -->
  <teleport to="h1" />
  <teleport to="some-string" />
</template>

to를 이용해서 보낼수 있는데 그냥 일반적인 string으로는 사용하지 않습니다. 아이디나 클래스를 사용해서 사용하라고 하네요. 당연한 얘기지만 원하는 곳으로 제대로 보낼수 있어야 하기 때문입니다.

📌 Usage

// App.js
<template>
  <div id="teleport"></div>
  <MyDiv01 />
  <MyDiv02 />
</template>

<script>
import MyDiv01 from './components/MyDiv01';
import MyDiv02 from './components/MyDiv02';

export default {
  name: 'App',
  components: {
    MyDiv01,
    MyDiv02
  }
}
</script>

<template>
  <teleport to="#teleport">
    <div>MyDiv01</div>
  </teleport>
</template>

<template>
    <teleport to="#teleport">
    <div>MyDiv02</div>
  </teleport>
</template>

이제 div(#teleport)안으로 들어가집니다.

📌 Conclusion

vue3에서 teleport를 지원해준다니 정말 좋은 소식이었던거 같아요. 기존에 vue에서 텔레포트를 이용하기 위해서는 따로 lib를 설치해야했는데 이제 그러지 않아도 된다는게 너무 신이 납니다. 그럼 다음 포스팅을 기대해주세요!

📌 Reference

• Vue3 공식 문서