Question

我使用从脚本（不是CLI）加载的Vue，并在名为admin.js的文件中使用它。它存储可以通过发出事件相互交互的多个组件。这里没有使用Vuex。我还有一个名为socket的文件，用于创建websocket和onmessage事件侦听器。值得注意的是，套接字与Vue组件没有任何共同之处，并且它是应用程序的不同部分。 Vue组件可以使用套接字，因为它定义为：

var Socket = new WebSocket(wsServer + ":" + wsPort);

因为它是在主作用域中创建的，所以所有Vue组件都可以像这样使用它：

Socket.send({ ... })

但是，在某些情况下，可能需要分析来自套接字的数据并使用来自多个组件的数据对其进行反应。

我看到了两种解决方案：

添加每个可能等待套接字addEventListener中的数据的组件，并根据来自套接字的命令来调用组件的内部方法。换句话说-将数据从Socket发送到Components并做出适当的反应。在我看来，这并不是很好，尤其是因为事件侦听器喜欢自我繁殖，并且从中获取安全性也很混乱。
直接从套接字获取组件中的数据。我的意思是，如果特定消息出现在事件侦听器中，则onmessage检查组件以获取所需数据并做出反应。

它看起来像这样：

Socket.onmessage = function(e) {
    let json = JSON.parse(e.data);
    if ( json.cmd == "CALLDATA" ) {
        // get data from Vue component
        let obj = objectized data from component 
        Socket.send(obj)
    }
}

问题来了：如何（或有可能？）从Vue组件外部从一个或多个组件获取数据？

Answer 1

创建一个简单的插件来包装套接字并发送/接收消息。创建组件时，请安装插件-Vue.use(MySocketPlugin)-然后在每个组件中使用该插件作为您提供的名称-即this.$mySocketPlugin。

this.$mySocketPlugin.onmessage('some-message', function (payload) {
     // do the thing with payload
})

this.$mySocketPlugin.send('some-other-message', data)

或者，使用发送和接收数据的必要方法创建全局混合。两种方法确实很相似，只是您喜欢哪种方法。

从外部vue获取Vue组件的数据

1 个答案: