Javascript 另一个vuejs应用程序中的vuejs调用方法（单独的窗口）

我有两个vuejs应用实例，它们在两个单独的浏览器窗口中打开。我想在两者之间进行通信，通过方法传递简单的数据

使用纯JS，您可以在窗口B的页面上声明一个函数，并从窗口a调用它

窗口A（普通JS）：

窗口B（普通JS）：

如何对vuejs执行相同的操作？我会在每个窗口上运行一个单独的应用程序实例

窗口A（VueJS）：

窗口B（VueJS）：

似乎我需要获得vue应用程序的句柄，然后找到并调用该方法

---

我这样做的原因是因为windowB包含一个视频流，我希望能够在windowB上使用全屏，并在另一个监视器上使用windowA来输入数据。提前谢谢

我建议您使用外部MessageBroker应用程序

<>你有很多选择，但是两个（我认为）最好的是

雷迪斯

它是一个非常快速的内存服务器，可以监听IP:端口，而且安装和使用非常简单。它的主要限制是主要用于少量数据，即key:value。如果您的客户在内部网络上，并且对第三方解决方案的访问有限，或者您只是不想花钱，那么这也是理想的选择

或

谷歌Firestore 它在几乎所有方面都提供了更大的灵活性，它可以持久化数据，并且任何连接到它的客户端都将实时更新。理想情况下，您可以通过vuex进行连接，然后随着firestore上数据的更改，所有UI变量都将更新。如果您不存储太多数据，它可以是免费的，但是配置起来更困难

---

一旦你将应用程序A连接到商店并向其写入数据，你只需让应用程序B轮询商店以查找更新，使用Firestore，你甚至不必轮询，数据将被推送到应用程序中。

你能访问

这个.windowReference.App

吗，因为

应用程序

保存在窗口B的根目录下？我真的，真的不推荐这个。也就是说，您可以通过存储对Vue实例引用的变量访问Vue实例的属性，包括其方法，在本例中是变量

app

。例如，您可以执行

app.handleMethodCall（）

以调用窗口B中Vue实例的

handleMethodCall（）

方法（从窗口B）。我建议使用或在windows/vue应用程序之间进行通信，而无需将引用放在关闭之外的窗口级别。尝试调用此函数时使用vue基底。windowReference.app.handleMethodCall（）；App.vue？26cd:255未捕获类型错误：App.handleMethodCall不是VueComponent.callMethodInWindowB（App.vue？26cd:255）中的函数。在windowA中，this.windowReference.app返回一个对象，但找不到方法“handleMethodCall（）”，我用最新代码编辑了原始帖子。谢谢你。不幸的是，我需要即时的响应。当用户点击“获取”按钮时，我必须暂停电影并获取其当前位置。任何异步延迟都是不可接受的。

var windowReference = null;
function openWindow() {
    windowReference = window.open("../path-to-win-b.html", "myWin");
}

function callFunctionInWindowB() {
    //Invoked by some element.onclick()
    windowReference.method();
}

function method() {
    alert("hello");
}

var app = new Vue({
    data() : {
       windowReference: null
    },
    methods : {
      openWindow() {
          this.windowReference = window.open("../route-to-window-b", "myWin");
      },
      callMethodInWindowB() {
          //Invoked by some element.onclick()
          //This line does not work
          this.windowReference.app.handleMethodCall();

          //These lines do work, but I don't think this is the way it's designed to be called:  I came up with this by examining the object model in Chrome's debugger.
          var app = this.windowReference.app;
          var vueComponent = app.__vue__;
          var childVueComponent = vueComponent.$children[0];
          childVueComponent.handleMethodCall(timeValue);
      }
    }
});

var app = new Vue({
    data() : {

    },
    methods : {
      handleMethodCall() {
         alert("Hello from window B");
      }
    }
});