Vuejs和vue-socketio：如何將套接字實例傳遞給組件

Question

我正在嘗試將Vuejs與Vue-Socket.io插件一起使用，並且有關於在組件之間傳遞套接字的正確方法的問題。

理想情況下，我想在我的整個應用程序中只使用一個套接字，因此我想在根實例中實例化套接字，然后將其作為“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從root組件訪問套接字對象，但我不知道不想做任何一件事，因為

• 如上所述，我可能想在其他組件中使用套接字
• 我不只是假設根實例中存在套接字對象

從本質上講，我想從架構的角度來做。

Answer 1

沒有必要通過任何東西。 Vue-Socket.io插件通過this.$socket插件使 每個組件（和Vue）上的套接字可用 this.$socket 。

我認為你的代碼可以工作，除了你似乎沒有綁定套接字的事實。

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

應該

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

上面的第一行只是將socket設置為字符串“this.socket”。 第二個將屬性設置為表達式this.socket的結果。

您還需要更改Vue的模板：

<App :socket="$socket"/>