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

Question

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

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

如果是这样，我做错了什么？我收到的错误是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)
    }
  }
})

然后应用程序通过套接字传递

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

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

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

本质上，我想从架构的角度正确地做到这一点。

Answer 1

不需要传递任何东西。Vue-Socket.io 插件通过使套接字在每个组件（和 Vue）上可用this.$socket。

我认为您的代码可以工作，除非您似乎没有绑定套接字。

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

应该

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

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

您还需要更改 Vue 的模板：

<App :socket="$socket"/>