[Vue] teleport

References

https://v3.ko.vuejs.org/guide/teleport.html

https://kyounghwan01.github.io/blog/Vue/vue3/teleport/#사용하는-이유

 

사용하는 이유

index.html 파일 내부를 보면 다음과 같은 코드가 있다.

<div id="app"></div>

이는 app이란 이름의 id 내에 모든 vue 로직이 돌아간다는 의미가 되는데

만약, toast나 modal 팝업 같은 global한 이벤트가 생길때 이를 따로 처리하는데에 한계가 있을 수 있다.

따라서, 이러한 문제를 해결하기 위한 방법이 teleport다.

 

사용방법

index.html에 teleport를 ****위한 별도의 id를 만든다.

<div id="app"></div>

<!-- 새로운 영역 생성 -->
<div id="modal"></div>

이벤트 로직과 관련된 component를(Modal.vue) 구현한다.

<template>
	... html 구현문
</template>

<script>
	... vue script 구현문
</script>

<style>
	... css 구현문
</style>

teleport와 관련된 component를(TeleportExample.vue) 구현한다.

이때, teleport라는 태그를 열어 to 속성에 index.html에 추가했던 id 이름을 기재하여 이벤트 로직이 담긴 component를 불러온다.

<template>
	<teleport to="#modal">
    <Modal />
  </teleport>
</template>

<script>
	import Modal from "./Modal";

	export default {
	  components: {
	    Modal
	  }
	};
</script>

App.vue에 teleport component를(TeleportExample.vue) 불러온다.

<template>
	<TeleportExample />
</template>

<script>
	import TeleportExample from "@/components/teleport/TeleportExample";

	export default {
	  components: {
	    TeleportExample
	  }
	};
</script>