vue.js - 在新窗口中打开一个 VueJS 组件

Question

我有一个只有一页的基本 VueJS 应用程序。
它不是 SPA，我不使用 vue-router。

我想实现一个按钮，当单击该按钮时，它会使用我的一个 Vue 组件中的内容执行 window.open() 函数。

查看来自 window.open() 的文档我看到以下 URL 声明:

URL accepts a path or URL to an HTML page, image file, or any other resource which is supported by the browser.

是否可以将组件作为 window.open() 的参数传递？ ?

Answer 1

我能够使用来自 an article about Portals in React 的一些见解创建一个 Vue 组件，该组件能够在新窗口中挂载其子组件，同时保持 react 性!它很简单:

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

试试这个 codesandbox !

该组件的代码如下:

<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 组件(顶级 <div> )关联的 DOM 元素，并将其插入到子窗口的主体中。由于此元素与 Vue 通常更新的引用相同，只是在不同的位置，因此一切正常 - Vue 继续更新元素以响应数据绑定(bind)更改，尽管它已安装在新窗口中。我真的很惊讶这是多么简单!