Vuejs et vue-socketio: comment passer l'instance de socket aux composants

Question

J'essaie d'utiliser Vuejs avec le Vue-Socket.io plugin et j'ai une question concernant la façon correcte de passer le socket entre les composants.

Idéalement, je ne souhaite utiliser qu'une seule socket dans l'ensemble de mon application. Je veux donc instancier le socket dans l'instance racine et le transmettre ensuite aux composants qui en ont besoin en tant que 'prop'. Est-ce la bonne façon de le faire?

Si oui, qu'est-ce que je fais de mal? L'erreur que je reçois est TypeError: this.socket.emit is not a function alors je ne passe probablement pas l'objet socket correctement.

Le composant à l'aide du socket a le script suivant

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

Mon initialisation du composant racine ressemble à ceci:

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

Et App passe ensuite la prise via

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

NB: Je sais que je pourrais aussi mettre l'instanciation de socket dans le composant qui en a besoin (dans ce cas: en haut), ou je pourrais accéder à l'objet socket du composant racine via this.$root.$socket, mais je ne veux pas faire non plus, parce que

• Comme indiqué plus haut, je pourrais vouloir utiliser la prise dans d'autres composants
• Je ne veux pas seulement de prendre un objet socket est là dans l'instance racine

essentiellement, je veux faire les choses d'un point de vue architectural.

Answer 1

Il n'y a pas besoin de passer quelque chose. Le plugin Vue-Socket.io makes the socket available sur chaque composant (et Vue) via this.$socket.

Je pense que votre code fonctionnerait, sauf pour le fait que vous ne semblez pas liaison le socket.

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

devrait être

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

La première ligne ci-dessus prise vient de mettre à la chaîne "this.socket". La seconde définira la propriété sur le résultat de l'expression, this.socket.

Vous devez également modifier le modèle pour la Vue:

<App :socket="$socket"/>