[vue3] teleport란 ?

모달 teleport를 하나 생성했는데, 컴포넌트로 따로 빼서 사용하였다.

<teleport :to="to">
  <div class="modal-component">
    <slot></slot>
  </div>
</teleport>

 

사용방법

<template>
	<section class="fb__notice">
    	<h2>공지사항페이지</h2>
        <div> ... </div>
        
        <!-- teleport한 모달이 여기로 들어올 것임 -->
    </section>
    
    <modal-component to=".fb__notice"></model-component>
</template>

제이쿼리처럼 .이나 #으로 위치를 지정해줄 수 있다.
그리고 주석위치로 모달 컴포넌트 내용이 들어오게 된다. (teleport 안의 내용이 지정한 위치로 들어오게됨)