Vuej 및 vue-socketio: 소켓 인스턴스를 컴포넌트에 전달하는 방법

Vuej 및 vue-socketio: 소켓 인스턴스를 컴포넌트에 전달하는 방법

Vuejs를 Vue-Socket.io 플러그인과 함께 사용하려고 하는데 컴포넌트 간에 소켓을 올바르게 연결하는 방법에 대한 질문이 있습니다.

이상적으로는 앱 전체에서 소켓을 1개만 사용하고 싶기 때문에 루트 인스턴스에서 소켓을 인스턴스화하여 필요한 컴포넌트에 '프롭'으로 전달하고 싶습니다.그게 올바른 방법인가요?

그렇다면 제가 뭘 잘못하고 있는 걸까요?수신되는 에러는,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)
    }
  }
})

그리고 나서 앱은 소켓을 통해

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

NB: 소켓인스턴스화를 필요한 컴포넌트에 넣거나(이 경우는 top), 또는 루트 컴포넌트에서 소켓오브젝트에 액세스 할 수도 있습니다.this.$root.$socket하지만 저도 하고 싶지 않아요.

• 위와 같이 소켓을 다른 컴포넌트에 사용하고 싶을 수 있습니다.
• 루트 인스턴스에 소켓오브젝트가 있다고 가정하고 싶지는 않습니다.

본질적으로, 저는 건축적인 관점에서 그것을 바로 하고 싶습니다.

어떤 것도 통과시킬 필요가 없다.Vue-Socket.io 플러그인은 모든 컴포넌트(및 Vue)에서 소켓을 사용할 수 있도록 합니다.this.$socket.

소켓에 바인딩이 되어 있지 않은 것 이외에는 코드가 동작할 것이라고 생각합니다.

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

그래야 한다

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

위의 첫 번째 행은 소켓을 문자열 "this.socket"로 설정합니다.두 번째는 표현식의 결과로 속성을 설정합니다.this.socket.

Vue 템플릿도 변경해야 합니다.

<App :socket="$socket"/>

언급URL : https://stackoverflow.com/questions/46080572/vuejs-and-vue-socketio-how-to-pass-socket-instance-to-components