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

这个问题听起来很基本,但是我无法弄清楚如何在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
   }
})

以下是用例：

>我知道这不起作用,因为组件中的config变量正在寻找app.config
>我不想在Vue对象中将其作为data {config：config}传递.
>我可以将其传递为< mycomponent：config =“ {'cols'：4,'color'：'red'}”>< / mycomponent>但是配置将非常长,这将是我的最后选择.
>是的,此配置不会在页面加载后更改,因此不需要绑定值.

有没有办法做到这一点？

解决方法:

您可以将全局成员添加到Vue本身.更新：正如Osuwariboy在评论中指出的那样,由于某种原因,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>

标签：vue-js,vue-component,javascript
来源： https://codeday.me/bug/20191026/1932712.html