Question

我目前正在使用Vue，我们有一个主要的Vue实例，其中包含.vue格式的多个组件。但是，当我们使用Socket.IO时，我们必须在组件中创建Socket.IO实例。有没有办法在我们的主Vue实例中实例化Socket.IO并将其传递给组件？

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

本文介绍了使用Vue包含js库的一种方法：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这样的模块捆绑器，我建议只从文件中导出套接字实例并将其导入任何需要它的组件。

Answer 3

将数据传递给组件的常用方法是通过属性。 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 4

您可以在main.js中全局声明它或者用于实例化vue的任何内容，它可以在您的组件中使用。我已经在很多场合用Jquery（模块化）完成了这个。

将数据传递给Vue组件？

4 个答案: