Question

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

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

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

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

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

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

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

从本质上讲，我想从架构的角度来做这件事。

Answer 1

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

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

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

应该是

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

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

的结果

您还需要更改Vue的模板：

<App :socket="$socket"/>

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

1 个答案: