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

我试图将Vuejs与一起使用，但对于在组件之间传递套接字的正确方式，我有一个疑问

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

如果是，我做错了什么？我收到的错误是

TypeError:this.socket.emit不是函数

，因此我可能没有正确传递套接字对象

使用套接字的组件具有以下脚本

<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>

导出默认值{
名称：'顶部'，
道具：['socket']，
数据（）{
返回{
标题：“我的标题”
}
},
方法：{
按钮点击：功能（val）{
//这将向socketio服务器发出一些信息
console.log（'单击按钮'）
this.socket.emit（'vuejs_inc'，val）
}
}
}

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

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)
    }
  }
})

从“Vue”导入Vue
从“vue socket.io”导入VueSocketio
从“./App”导入应用程序
从“./路由器”导入路由器
Vue.use（vuescocketio，'http://127.0.0.1:5000')
Vue.config.productionTip=false
/*eslint禁用无新*/
新Vue({
el:“#应用程序”，
路由器，
模板：“”，
组件：{App}，
插座：{
连接：函数（）{
console.log（'Vuejs套接字已连接'）
},
来自服务器：功能（val）{
console.log（'从服务器接收的数据：'+val）
}
}
})

然后，应用程序通过

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

注意：我知道我也可以将套接字实例化放入需要它的组件中（在本例中为top），或者我可以通过

this.$root.$socket

从根组件访问套接字对象，但我不想这样做，因为

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

---

本质上，我想从体系结构的角度正确地完成它。

没有必要通过任何测试。通过

this.$Socket在每个组件（和Vue）上安装Vue-Socket.io插件

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

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

我通过
this.$socket
将socket实例从根实例传递到应用实例中，所以我不应该从应用程序传递
this.socket
。但这在体系结构上也是正确的使用方法吗？我认为在组件定义中声明性（根据预期的内容）是一件好事，这就是为什么我想显式地传递套接字实例。@random_error这与Vuex和VueRouter的工作方式相同（分别实现$store和$router属性），它们是官方插件。你可以提出强有力的论点，认为这是“正确的方式”。另一种方法是使用与Vuex集成的插件（如果您正在使用它），只发送操作来发送/接收消息。这是有道理的，但假设我想重用我的组件，或者让其他重用组件的人清楚地知道它需要套接字io连接，那么正确的方法是什么？vuex$store和VueRouter随Vue一起提供，因此它们可能会出现，但socketio插件不一定会出现。我可能想得太多了，因为我对Vue很陌生，我只是想实现一个清晰简洁的设计。@random_error我不认为您考虑这些问题是错误的。就我个人而言，Vuex嵌入到每个组件中并没有太多意义，因为它必然会将您的组件与Vuex联系起来。这就是LIB存在的原因。然而，Vue的力量似乎确实在推动插件的这种方法，社区也在接受它。也就是说，我不认为你采取了错误的方法，我只是认为这可能为时过早。如果需要，您可以重构。@random\u错误另外，我注意到代码中可能有错误。你可以试试那个改变。
<top :socket="socket"></top>

<App :socket="$socket"/>