[VUE] teleport 사용하기 (원하는 곳으로 코드 이동)

안녕하세요!

프뚜(프로그래머 뚜)입니다!

 

[개발 환경]

 - OS: windows 10 64bit

 - git: 2.37.1.windows.1

 - nodejs: v16.16.0

 - npm: 8.15.0

 - yarn: 1.22.19

 - @vue/cli(vue3): 5.0.8

 - vue-router: 4.1.3

 

현재 사용하고 있는 코드가 공통 작업 또는 다른 vue에 사용되어야할 때가 있습니다. 이때 텔레포트를 사용하면 됩니다.

 

 

1. App.vue 세팅하기

router-view만 있는 App.vue입니다.

 

 

2. Main.vue 세팅하기

Main.vue입니다.

 

 

3. 실행해서 요소 값 확인하기

vue는 id="app"에 모든 요소가 들어가 있습니다.

 

 

4. Main.vue에서 App.vue 요소에 값을 이동시키기

# Main.vue에서 App.vue로 코드를 이동시키려면 id값이 필요함
#  1. App.vue에서 받을 div 공간을 생성 후 id 값을 추가하기
<div id="ssjeong"></div>
#  2. Main.vue에서 이동시킬 코드를 teleport 태그로 감싼 후 to="#id"
<teleport to="#ssjeong">
  App.vue에 출력하고 싶은 내용입니다.
</teleport>

Main.vue에서 <div>APP.vue에 사용하기</div> 값을 App.vue로 이동하고 싶은 상태입니다.

App.vue에 div를 생성하고 id값을 추가합니다.

Main.vue에서 이동하고 싶은 코드를 teleport 태그로 감싼 후 id값을 세팅합니다.

id="app" 영역에 Main.vue 코드가 이동함을 확인할 수 있습니다.

 

 

해당 프로젝트는 gitlab에 제공되고 있습니다. (포스팅 제목과 Git History는 1:1 매칭입니다.)

https://github.com/JeongSeongSoo/vue-tistory

GitHub - JeongSeongSoo/vue-tistory

 

궁금하신 부분 또는 문제가 생긴 부분에 대해서 댓글 남겨주시면 빠르고 정확한 답변드리겠습니다.