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

时间:2018-07-10 21:37:49

标签: javascript vue.js vuejs2

我有两个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来输入数据。预先感谢!

1 个答案:

答案 0 :(得分:0)

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

您有很多选择,但是(我认为)最好的是两个

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,您甚至不必轮询,数据将被推送到该应用程序。