[Vue.js] portal , teleport사용법

vue 2와 vue 3 버전에 따라 

 

portal이 teleport으로 변경되면서, 사용 방법도 달라진다.

 

chatGPT가 알려주나, 이게 과연 맞는 방법인지확인하고자 공식문서를 토대로 알아가보자

 

보통 두 기능은 전체 화면을 모달로 제작할 때 사용한다.

중첩된 DOM 구조를 벗어날 수 있는 깔끔한 방법을 제공한다.

사용방법

1. portal

 - install Package : 

npm install --save portal-vue@next

# or with yarn
yarn add portal-vue@next

 

- add it to application

import PortalVue from 'portal-vue'

 

사용방법

 

부모 (사용 문법 pug/jade)

portal-target(name='destination')

 

자식

<portal to='destination'>
	<vue-manage-modal v-if='isShowManageModal' v-bind:prop-params='propParams' :key='isShowManageModal'
                        @close='isShowManageModal = false' @termination-modal='terminationModal'
                        @search='search'></vue-manage-modal> 예시
</portal>

 

 

공식 portal 문서 : https://portal-vue.linusb.org/guide/getting-started.html#what-is-portalvue

2. teleport

 

vue 3의 경우 내장 함수이기에 따로 include할 필요 x

사용 방법

<Teleport to="body">
  <div v-if="open" class="modal">
    <p>모달에서 인사합니다!</p>
    <button @click="open = false">닫기</button>
  </div>
</Teleport>

 

위와같이 사용하면되나, 구조를 나눠서 작성할 경우

 

부모 html

<div id ='modal-container'></div>

 

자식 html

<Teleport to="#modal-container">
  <vue-phishing-detail v-if='isShowDetailModal' v-bind:prop-params='propParams' :key='isShowDetailModal'
                       @close='isShowDetailModal = false'
                       @termination-modal='terminationModal'></vue-phishing-detail>
</Teleport>

이런식으로 사용하면 된다.


공식문서 텔레포트 URL : https://ko.vuejs.org/guide/built-ins/teleport