vue.js 컴포넌트를 애플리케이션 루트에 마운트합니다.
나는 모달(modal.vue 컴포넌트는 다음과 같습니다.
<template>
<transition name="modal-transition">
<div class="modal-body" v-if="displayed">
<div class="modal-overlay" @click="displayed = false"></div>
<div class="modal-content">
<slot/>
</div>
</div>
</transition>
</template>
이 컴포넌트를 배치하지 않고 애플리케이션 루트 요소에 마운트하려면 어떻게 해야 합니까?
부정확한 예제의 경우:
<body>
<div id="app">
<div class="header"></div>
<div class="nav"></div>
<div class="stage">
<div class="sub-nav"></div>
<div class="content">
<modal :display.sync="display">MY MODAL</modal> <-- Don't mount here...
</div>
</div>
<-- Mount here instead...
</div>
</body>
현재의 문제는 사이트 헤더와 네비게이션이 모달 위에 레이어되어 있고 모달 오버레이 뒤에 레이어되지 않고 전체 화면 오버레이가 어둡다는 것입니다.
Vue 2
자체 요소를 애플리케이션 루트 요소로 이동하려면 포털을 선호 솔루션으로 사용하는 방법과 부록을 사용하는 두 가지 방법이 있습니다.
포털 사용방법(권장방법)
PortalVue는 컴포넌트의 템플릿(또는 컴포넌트의 일부)을 문서 내 어디에서나 렌더링할 수 있는2개의 컴포넌트 세트입니다.Vue App에 의해 제어되는 부품 이외에서도 가능합니다.
https://portal-vue.linusb.org/
부록 사용(베스트 프랙티스 아님)
포털 라이브러리 추가가 너무 많은 경우 VUE 문서에서는 추가를 사용할 수 있지만 공식적으로 권장하지는 않습니다.
일반적으로 이 특정 마운트 위치는 전체 앱의 맨 위에 렌더링해야 하는 사용자 자신의 모달 또는 대화 상자 팝업을 위한 z-index 오버레이를 충족합니다.당신은 언제든지 이것을 대체할 수 있습니다.이 예에서는 표준 getElementBy 또는 querySelector 함수를 사용하는 다른 요소 타겟에 대해 $root.$el을 지정합니다.
여기서 요소는 파괴 및 재추가되지 않고 이동하며, 모든 반응 기능이 그대로 유지됩니다.
<script>
export default {
name: 'modal',
...
mounted: function() {
this.$root.$el.append(this.$el);
},
destroyed: function() {
this.$el.parentNode.removeChild(this.$el);
}
}
</script>
마운트 시 요소는 최상위 VUE 앱 인스턴스가 마운트된 내부로 이동합니다.
삭제 시 마이그레이션된 구성요소에 대한 자리 표시자 DOM 설명이 새 상위 구성요소에서 제거되어 구성요소가 자체 재마운트될 때마다 고립된 중복을 방지합니다.VUE는 공식적으로 VUE 이외의 요소를 파괴하지 않도록 명시하고 있습니다.이 문구와 혼동하지 마십시오.여기서는 컴포넌트가 이미 파괴되어 있습니다.
이 DOM 코멘트 복제는 보통 vue-router 뷰 상태가 변경될 때마다 라우터 뷰의 모든 컴포넌트를 마운트 및 마운트 해제하는 메커니즘에 따라 vue-router 뷰를 스위칭할 때 발생합니다.
이 동작은 vue-router에 의한 버그로, VUE Render Manager에 의해 개체가 올바르게 삭제되지만 실수로 인덱스 참조가 남아 있으므로 포털 패키지를 사용하여 이 문제를 해결합니다.
결과는 다음과 같습니다.
Vue 3 업데이트
이제 텔레포트라는 기능이 내장되어 컴포넌트 템플릿의 일부를 임의의 DOM 요소에 마운트할 수 있게 되었습니다.
OP의 예는 다음과 같습니다.
<!-- MyModal.vue -->
<template>
<transition name="modal-transition">
<div class="modal-body" v-if="displayed">
<div class="modal-overlay" @click="displayed = false"></div>
<div class="modal-content">
<slot/>
</div>
</div>
</transition>
</template>
<!-- SomeDeeplyNestedComponent.vue -->
<template>
<teleport to="#app">
<!-- Can still receive props from parent -->
<MyModal :my-prop="foo">
<!-- slot content -->
</MyModal>
</teleport>
</template>
언급URL : https://stackoverflow.com/questions/51390889/vue-js-mount-component-to-app-root
'programing' 카테고리의 다른 글
| Java 열거형에서 일반 유형 매개 변수를 사용할 수 없는 이유는 무엇입니까? (0) | 2022.08.08 |
|---|---|
| 계산된 속성을 모든 구성 요소에 사용할 수 있도록 설정 (0) | 2022.08.08 |
| 영어 대신 중국어로 된 요소 UI 페이지 표시 (0) | 2022.08.08 |
| C의 정규 표현: 예? (0) | 2022.08.08 |
| VueJ는 컴포넌트에서 목록을 다시 렌더링하지 않음 (0) | 2022.08.08 |