Vuejs 和 vue-socketio：如何将套接字实例传递给组件

Question

我正在尝试将 Vuejs 与 Vue-Socket.io plugin 一起使用，并且对在组件之间传递套接字的正确方法有疑问。

理想情况下，我只想在整个应用程序中使用一个套接字，因此我想在根实例中实例化套接字，然后将其作为“道具”传递给需要它的组件。这是正确的做法吗？

如果是这样，我做错了什么？我收到的错误是TypeError: this.socket.emit is not a function，所以我可能没有正确传递套接字对象。

使用socket的组件有如下脚本

<script>
  export default {
    name: 'top',
    props: ['socket'],
    data () {
      return {
        Title: 'My Title'
      }
    },
    methods: {
      button_click: function (val) {
        // This should emit something to the socketio server
        console.log('clicking a button')
        this.socket.emit('vuejs_inc', val)
      }
    }
  }
</script>

我在根组件中的初始化如下所示：

import Vue from 'vue'
import VueSocketio from 'vue-socket.io'
import App from './App'
import router from './router'

Vue.use(VueSocketio, 'http://127.0.0.1:5000')
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App socket="this.$socket"/>',
  components: {App},
  sockets: {
    connect: function () {
      console.log('Vuejs socket connected.')
    },
    from_server: function (val) {
      console.log('Data from server received: ' + val)
    }
  }
})

然后App通过

<top socket="this.socket"></top>

注意：我知道我也可以将套接字实例化放入需要它的组件中（在本例中为：顶部），或者我可以通过 this.$root.$socket 从根组件访问套接字对象，但我没有也不想做，因为

• 如上所述，我可能想在其他组件中使用套接字
• 我不只是想假设根实例中存在套接字对象

本质上，我想从架构的角度来做。

Answer 1

没有必要传递任何东西。 每个组件（和 Vue）上的 Vue-Socket.io 插件 makes the socket availablethis.$socket。

我认为你的代码可以工作，只是你似乎没有绑定套接字。

<top socket="this.socket"></top>

应该是

<top :socket="socket"></top>

上面的第一行只是将 socket 设置为字符串“this.socket”。第二个将属性设置为表达式的结果，this.socket。

您还需要更改 Vue 的模板：

<App :socket="$socket"/>