Question

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

我想实现一个按钮，当点击它时，会执行window.open（）函数，其中包含来自我的一个Vue组件的内容。

查看window.open()的文档，我看到了以下URL语句：

URL接受HTML页面，图像文件或浏览器支持的任何其他资源的路径或URL。

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

Answer 1

我能够使用an article about Portals in React的一些见识来创建一个Vue组件，该组件能够将其子级安装在新窗口中，同时保持反应性！就像这样简单：

<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通常会更新的相同引用相同，因此在所有其他地方，Just Works-Vue都会继续更新该元素以响应数据绑定更改，尽管该元素已安装在Vue中。新窗户。实际上，我很惊讶这是如此简单！

Answer 2

您无法传递Vue组件，因为window.open不了解Vue。但是，您可以创建一个显示组件的路径，并将此路径的URL传递给window.open，为您提供一个包含组件的新窗口。不同窗口中组件之间的通信可能会变得棘手。

Answer 3

例如，如果您的主提示是这样声明的

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);

在新窗口中打开VueJS组件

3 个答案: