Vue 2용 Vue 3 텔레포트

Vue 2용 Vue 3 텔레포트

Vue 3에서는 컴포넌트를 텔레포트하여body태그는 다음과 같습니다.

<template>
  <button @click="modalOpen = true">
    Open full screen modal! (With teleport!)
  </button>
    
  <teleport to="body">
    <div v-if="modalOpen" class="modal">
      <div>
        I'm a teleported modal! 
        (My parent is "body")
        <button @click="modalOpen = false">
          Close
        </button>
      </div>
    </div>
  </teleport>
</template>

<script>
export default {
  data() {
    return { 
      modalOpen: false
    }
  }
};
</script>

이것에 의해, 상기의 모달 다이얼로그는, 다음과 같이 렌더링 됩니다.body태그. Vue 2에서 어떻게 비슷한 것을 얻을 수 있을까요?

Vue 2는 텔레포트를 지원하지 않기 때문에 vue 2용으로 만들어진 Portal-vue 컴포넌트를 사용할 것을 권장합니다.

설치:

npm i portal-vue --save

사용방법:

main.discloss.main.discloss.

import Vue from "vue"
import PortalVue from 'portal-vue'
Vue.use(PortalVue)
...

일부 하위 구성 요소 내부:

<portal to="destination">
  <p>This slot content will be rendered wherever the <portal-target> with name 'destination'
    is  located.</p>
</portal>

기타 장소:

<portal-target name="destination">
  <!--
  This component can be located anywhere in your App.
  The slot content of the above portal component will be rendered here.
  -->
</portal-target

언급URL : https://stackoverflow.com/questions/66136147/vue-3-teleport-for-vue-2