새 창에서 VueJS 구성 요소 열기

새 창에서 VueJS 구성 요소 열기

기본적인 VueJs 어플리케이션은 1페이지밖에 없습니다.SPA도 아니고 vue-router도 사용하지 않습니다.

버튼을 클릭하면 vue 컴포넌트 중 하나의 콘텐츠로 window.open() 함수가 실행됩니다.

에서 문서를 보니 URL에 대해 다음과 같은 문구가 있었습니다.

URL은 HTML 페이지, 이미지 파일 또는 브라우저에서 지원되는 기타 리소스에 대한 경로 또는 URL을 허용합니다.

컴포넌트를 인수로 전달할 수 있습니까?window.open()?

반응성을 유지하면서 새 창에 자녀를 마운트할 수 있는 Vue 컴포넌트를 만들기 위해 React의 Portals에 대한 기사에서 얻은 통찰력을 사용할 수 있었습니다.심플한 것은, 다음과 같습니다.

<window-portal>
  I appear in a new window!
</window-portal>

이 코드와 상자에서 시도해 보세요!

이 컴포넌트의 코드는 다음과 같습니다.

<template>
  <div v-if="open">
    <slot />
  </div>
</template>

<script>
export default {
  name: 'window-portal',
  props: {
    open: {
      type: Boolean,
      default: false,
    }
  },
  data() {
    return {
      windowRef: null,
    }
  },
  watch: {
    open(newOpen) {
      if(newOpen) {
        this.openPortal();
      } else {
        this.closePortal();
      }
    }
  },
  methods: {
    openPortal() {
      this.windowRef = window.open("", "", "width=600,height=400,left=200,top=200");
      this.windowRef.addEventListener('beforeunload', this.closePortal);
      // magic!
      this.windowRef.document.body.appendChild(this.$el);
    },
    closePortal() {
      if(this.windowRef) {
        this.windowRef.close();
        this.windowRef = null;
        this.$emit('close');
      }
    }
  },
  mounted() {
    if(this.open) {
      this.openPortal();
    }
  },
  beforeDestroy() {
    if (this.windowRef) {
      this.closePortal();
    }
  }
}
</script>

열쇠는 선이다.this.windowRef.document.body.appendChild(this.$el); 이 행은 Vue 컴포넌트(최상위 레벨)와 관련된 DOM 요소를 효과적으로 삭제합니다.<div>)를 클릭하여 자창 본문에 삽입합니다.이 요소는 Vue가 보통 갱신하는 것과 동일한 참조이므로 다른 장소에서만 갱신할 수 있기 때문에 모든 Just Works - Vue는 새로운 창에 마운트되어 있어도 데이터 바인딩 변경에 따라 계속 갱신합니다.나는 사실 이것이 얼마나 간단한지에 꽤 놀랐다!

Vue 구성 요소를 전달할 수 없습니다.window.openVue는 몰라요.단, 컴포넌트를 표시하는 루트를 생성하여 이 루트의 URL을 에 전달합니다.window.open컴포넌트와 함께 새 창이 나타납니다.다만, 서로 다른 윈도우의 컴포넌트간의 통신은 곤란할 수 있습니다.

예를 들어 기본 vue가 다음과 같이 선언된 경우

var app = new Vue({...});

새 창에서 몇 개의 데이터만 렌더링하면 되는 경우 상위 창에서 데이터 모델을 참조할 수 있습니다.

var app1 = window.opener.app;

var title = app.title;

var h1 = document.createElement("H1");

h1.innerHTML = title;

document.body.appendChild(h1);

언급URL : https://stackoverflow.com/questions/49657462/open-a-vuejs-component-on-a-new-window