Vue에서 Teleport를 사용하여 템플릿의 일부를 이동하는 방법

일반적으로 Vue에서 구성 요소를 만들면 예상되는 DOM 구조 내에 자연스럽게 나타납니다. 그러나 때때로 이것은 말이 되지 않습니다. 이에 대한 좋은 예는 모달입니다. 일반적으로 모달은 페이지의 모든 항목 위에 표시되어야 합니다. 따라서 논리적으로 이해되는 구성 요소 내에서 모달을 생성하면 특정 HTML 요소 뒤에 나타나거나 이상한 CSS 스타일이 필요할 수 있습니다. 정상에 오르기 위해.

다행히 Vue에는 <Teleport>라는 이 문제를 쉽게 해결할 수 있는 방법이 있습니다. <Teleport> 태그를 사용하면 구성 요소 내에서 무언가를 정의한 다음 코드에서 원하는 위치로 "텔레포트"할 수 있습니다. 어떻게 작동하는지 살펴보겠습니다.

Vue에서 Teleport가 작동하는 방식

Vue에 모달을 포함하는 Modal.vue라는 간단한 구성 요소가 있다고 가정합니다. 다음과 같이 보입니다.

<script>
export default {
    data() {
        return {
            display: false
        }
    }
}
</script>
<template>
    <button id="show-modal" @click="display == true ? display = false : display = true">Show Modal</button>
    <div class="modal" v-if="display">
        My Modal
    </div>
</template>

우리 구조에서 이 모달은 응용 프로그램 구조에서 상당히 깊숙이 위치합니다.

Modal.vue는 우리 구조에서 너무 깊기 때문에 우리가 원하는 대로 나머지 콘텐츠 위에 표시되지 않을 수 있습니다. 따라서 body 태그의 직계 자식이 되는 것이 이상적입니다. <Teleport> 를 사용하여 다음과 같이 구성 요소를 조정하여 body 태그의 직계 자식이 되도록 "텔레포트"할 수 있습니다.

<script>
export default {
    data() {
        return {
            display: false
        }
    }
}
</script>
<template>
    <button id="show-modal" @click="display == true ? display = false : display = true">Show Modal</button>
    <Teleport to="body">
        <div class="modal" v-if="display">
            My Modal
        </div>
    </Teleport>
</template>

to의 Teleport 속성은 유효한 CSS 선택자일 것으로 예상됩니다. 이제 우리의 .modal div는 본문의 직계 하위로 텔레포트되므로 Vue 구조 내에 깊숙이 중첩되지 않고 항상 맨 위에 나타납니다.

텔레포트 태그 비활성화

Teleport 속성을 사용하여 특정 로직을 기반으로 :disabled 태그를 비활성화할 수 있습니다. 예를 들어 다음 코드를 사용하여 myToggle 값이 true로 설정되었는지 확인할 수 있습니다.

<Teleport :disabled="myToggle"></Teleport>

위에서 myToggle 가 true 로 설정되면 Teleport 가 작동하지 않습니다. 즉, 원할 때만 활성화할 수 있습니다. 따라서 Teleport는 Vue에서 특정 콘텐츠를 표시하는 위치와 시점을 조정하는 데 매우 유용한 태그입니다. 동일한 Vue 템플릿 내에서 여러 개의 태그Teleport를 사용해도 좋습니다.