将对象引用传递给vuejs组件

Question

我需要向vue-component传递一个对象引用。这背后的背景如下：

我有一个webapp，它只使用vuejs进行聊天。但是，webapp已经向我的服务器打开了一个WebSocket-connection，用于数据消息传递。我希望在WebSocket-powered聊天中重用现有的vue-powered，而不是打开另一个并行连接。我挣扎了一段时间，想把WebSocket对象从我的webapp传递到vue-component。

我想传递一个对完全动态的WebSocket-connection的引用，因此props或state是不可选的。

Answer 1

实际上，将对任意对象的引用传递给vue-component非常容易。假设您按以下方式挂载您的应用程序：

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

设置app上的引用，即this.app = myWebSocket不会将WebSocket公开给聊天组件，而是只公开给全局Vue-instance。相反，您必须通过以下方法访问组件：

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

薇拉:这很管用！我刚刚开始使用vuejs，并惊讶于这一切如何归结为纯js。希望这能帮助那些在类似问题上绊倒的人！