在新窗口中打开VueJS组件

Question

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

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

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

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

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

Answer 1

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

Answer 2

例如，如果您的主要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);