javascript - 将对象引用传递给 vuejs 组件

Question

我需要将对象引用传递给 vue 组件。其背后的背景如下:

我有一个网络应用程序，仅使用 vuejs 进行聊天。但是，Web 应用程序已经打开了到我的服务器的 WebSocket 连接以进行数据消息传递。我想在 vue 支持的聊天中重用这个现有的 WebSocket 连接，而不是打开另一个并行连接。我花了一段时间才将 WebSocket 对象从我的 web 应用程序传递到 vue 组件。

我想传递对完全动态 WebSocket 连接的引用，因此 props 或 state 不是选项。

Answer 1

实际上，将对任意对象的引用传递给 vue 组件非常容易。假设您按如下方式安装应用程序:

this.app = new Vue({
    render: (h) => h(Chat),
}).$mount("#myChatApp");

在 app 上设置引用，即 this.app = myWebSocket 不会将 WebSocket 暴露给 Chat 组件，而只会暴露到全局 Vue 实例。相反，您必须通过以下方式访问该组件:

this.app.$children[someIndex].ws = myWebSocket;

瞧:它有效!我刚刚开始使用 vuejs，并惊讶于它如何归结为纯 js。希望这可以帮助遇到类似问题的人!