Передача данных в компонент Vue?

Question

В настоящее время я работаю с Vue, и у нас есть основной экземпляр Vue с несколькими компонентами в формате .vue. Однако, когда мы используем Socket.IO, мы должны создать экземпляр Socket.IO в компоненте. Есть ли способ создать экземпляр Socket.IO в нашем основном экземпляре Vue и передать его компонентам?

Answer 1

Вы можете создать его экземпляр в родителе, а затем передать его детям через $broadcast и $on:

new Vue({ 
    ... 
    data: { 
      sock: {} 
    }, 
    compiled: function(){ 
      this.sock = io('http://192.168.10.10:3000'); 
      this.$broadcast('socketReady',this.sock); 
    } 
    ... 
}); 

var someChild = new Vue({ 
    ... 
    data: { 
      sock: {} 
    } 
    compiled: function(){ 
      this.$on('socketReady', function(sock){ 
       this.sock = sock; 
       socket.on(
        "test-channel:App\\Events\\EventName", 
        function(message){ 
         //do something with message 
        } 
       ); 
      }); 
    } 
    ... 
}) 

Answer 2

Обычный способ передачи данных к компонентам будет через свойства. https://vuejs.org/guide/components.html#Props

Прохладная вещь с Vue заключается в том, что вы можете двусторонне связать эти реквизиты!

Вот пример того, как это может выглядеть в вашем случае.

new Vue({ 

    data: { 
      connected: false 
    }, 

    ready: { 
     createConnection.then(function() { 
      connected = true; 
     }); 
    } 

}); 

Шаблон:

<component :connected="connected"></component> 

Компонент:

Vue.component('component', { 
    props: { 
     connected: { 
      type: Boolean, 
      required: false, 
      twoWay: true 
     } 
    } 
}); 

Вы можете использовать ту же технику, чтобы передать объект соединения и двухстороннюю связать его.

Answer 3

Вы можете объявить его глобально в main.js или что-то еще, что вы используете для создания экземпляра vue, и оно будет доступно для использования в ваших компонентах. Я делал это с JQuery (модульно) во многих случаях.

Answer 4

Эта статья показывает один метод, включая библиотеки JS с Vue: https://vuejsdevelopers.com/2017/04/22/vue-js-libraries-plugins/

По существу, вы могли бы сделать что-то вроде этого:

var socket = // create socket here 
Object.definePrototype(Vue.prototype, '$socket', { value: socket }) 

Затем вы можете использовать его как это:

new Vue({ 
    mounted() { 
    console.log(this.$socket); 
    } 
}) 

Однако, если вы используете модульный пакет, такой как Webpack, я бы предложил просто экспортировать экземпляр сокета из файла и импортировать его в любые компоненты n это.