如何将 javascript 对象传递给 VueJS 中的组件？

Question

这个问题可能听起来很基础，但我无法弄清楚如何在 VueJS 中做到这一点

我在html中有以下内容

<script>
 var config = {'cols':4,'color':'red'}
</script>

<div id="app">
   <mycomponent :config="config"></mycomponent>
</div>

var app = new Vue({
   el: '#app',
   data: {
      // config: config // I do not want to pass this
   }
})

以下是用例：

• 我知道这不起作用，因为组件中的配置变量正在寻找 app.config
• 我不想在 Vue 对象中将其作为 data{ config:config } 传递。
• 我可以将其传递为 <mycomponent :config="{'cols':4,'color':'red'}"></mycomponent>，但配置会很长，这将是我最后的选择。
• 是的，一旦页面加载，这个配置就不会改变，所以我不需要绑定值。

有没有办法做到这一点？

Answer 1

您可以将全局成员添加到 Vue 本身。 更新： 正如 Osuwariboy 在 cmets 中指出的那样，出于某种原因，Vue 在未缩小版本的 Vue 中不知道自己的名称。它需要创建一个 Vue 数据项，我在下面完成了。

var app = new Vue({
   el: '#app',
   data: {
      Vue
   },
   components: {
      myComponent: {
        template: '<div>{{config}}</div>',
        props: ['config']
      }
   }
});

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.3.3/vue.min.js"></script>
<script>
 Vue.$config = {'cols':4,'color':'red'}
</script>

<div id="app">
   <my-component :config="Vue.$config"></my-component>
</div>