我有一个只有一页的基本 VueJS 应用程序。 不是SPA，我也不用vue-router。
我想实现一个按钮，当单击该按钮时，它会使用我的一个 Vue 组件中的内容执行 window.open() 函数。
查看window.open()的文档，我看到了以下关于URL的声明：
URL 接受指向 HTML 页面、图像文件或浏览器支持的任何其他资源的路径或 URL。
是否可以将组件作为window.open() 的参数传递？
【问题讨论】：
window.open()
标签： vue.js vuejs2 vue-component window.open
我能够使用来自 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 通常会更新的元素相同的引用，只是在不同的地方，一切正常工作 - Vue 继续更新元素以响应数据绑定的变化，尽管它被安装在一个新窗户。我真的很惊讶这是多么简单！
【讨论】：
window.postMessage 来实现你在说什么。
例如，如果你的主 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);
【讨论】：
你不能传递一个 Vue 组件，因为window.open 不知道 Vue。但是，您可以做的是创建一个显示您的组件的路由并将该路由的 URL 传递给window.open，从而为您提供一个包含组件的新窗口。不过，不同窗口中的组件之间的通信可能会变得很棘手。
【讨论】：