Question

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

使用普通JS，您可以在窗口B的页面上声明一个函数，然后从窗口A调用它。

窗口A（普通JS）：

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

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

窗口B（普通JS）：

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

如何使用vuejs进行相同的操作？我将在每个窗口上运行一个单独的App实例。

窗口A（VueJS）：

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

窗口B（VueJS）：

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

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

好像我需要处理vue应用程序，然后找到调用方法。

之所以这样做，是因为windowB包含视频流，并且我希望能够在windowB上使用全屏显示，并在另一台监视器上使用windowA来输入数据。预先感谢！

Answer 1

我建议您使用外部消息代理应用程序

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

redis https://redis.io/

这是一个非常快的内存服务器，可以侦听IP：PORT，并且设置和使用也非常简单。它的主要限制是主要用途是用于少量数据，即key：value。如果您在内部网络上并且对第三部分解决方案的访问受限，或者您不想花任何钱，这也是理想的选择。

或

google Firestore https://firebase.google.com/docs/firestore/rtdb-vs-firestore 它几乎在所有方面都提供了更大的灵活性，它可以持久保存数据，并且连接到它的所有客户端都将实时更新。理想情况下，您将通过vuex连接它，然后您的所有UI变量将随着firestore上的数据更改而更新。如果您不存储太多数据，它可以是免费的，但是配置起来比较困难。

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

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

1 个答案: