Teleport

Teleport
Vue 3에서는 Portal 대신 Teleport 라는 문법이 내장되어 있다.
React의 Portal과 같은 개념이지만, 문법적으로 훨씬 간단하다.

<template>
  <teleport to="#modal-root">
    <div class="modal">Teleport Modal!</div>
  </teleport>
</template>

to 속성에 렌더링할 대상 DOM 셀렉터를 지정한다.
내부의 콘텐츠는 실제로 #modal-root에 렌더링되지만, 여전히 Vue 컴포넌트 트리 상에서는 부모-자식 관계로 유지된다.

특징

특징	설명
React Portal과 동일한 목적	부모 트리 밖으로 렌더링
템플릿 문법 내장	`<teleport>` 컴포넌트 형태로 바로 사용
반응성 유지	Teleport된 요소도 여전히 Vue의 reactive context 유지
대표 사용 사례	Modal, Tooltip, Notification 등

예시

예시 1

<body>
  <div id="app"></div>
  <div id="modal-root"></div>
</body>

<template>
  <div>
    <h1>App</h1>
    <teleport to="#modal-root">
      <div class="modal">This is a teleported modal!</div>
    </teleport>
  </div>
</template>