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

Posted

技术标签:

【中文标题】如何将 javascript 对象传递给 VueJS 中的组件?【英文标题】:How to pass a javascript object to component in VueJS? 【发布时间】:2017-10-31 05:22:07 【问题描述】:

这个问题可能听起来很基础,但我无法弄清楚如何在 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 传递。 我可以将其传递为 &lt;mycomponent :config="'cols':4,'color':'red'"&gt;&lt;/mycomponent&gt;,但配置会很长,这将是我最后的选择。 是的,一旦页面加载,这个配置就不会改变,所以我不需要绑定值。

有没有办法做到这一点?

【问题讨论】:

++,我定义了一些全局的my_componentname_config() 函数,然后在“created”钩子中调用它。但它不是一个很好的解决方案...... 作为对象字符串传递给组件会更好,而且约束是我在我的应用程序的多个地方使用这个组件,我所做的就是更改配置。配置在后端生成并与 HTML 一起传递。 按照此处所述制作插件:底部的***.com/a/43193455/7636961。 【参考方案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>

【讨论】:

这对我很有效!您能帮我理解为什么在应用程序内部无法访问外部定义的 javascript 对象吗? 如果它是一个全局变量,它是可以访问的,但是用var声明,它不是全局的。我建议将其附加到 Vue 全局而不是广泛开放的全局。 @RoyJ 无论我多么努力,我都无法让您的解决方案发挥作用。你能看看我的小提琴here 并告诉我我做错了什么吗? @Osuwariboy 如果你使用Vue的cloudflare cdn就可以了。您可以在 cloudflare 上使用 2.3.4 版本,它可以工作; unpkg.com cdn 也应该是 2.3.4,但它不起作用。我无法解释。 @Osuwariboy 你可以为 Vue 添加一个data,使用全局 Vue 定义它,你的就可以了。 jsfiddle.net/8xt8ye4g/5

以上是关于如何将 javascript 对象传递给 VueJS 中的组件?的主要内容,如果未能解决你的问题,请参考以下文章

如何将参数传递给 shell 脚本? [复制]

如何将库类或对象传递给片段?

sh 将参数传递给Bash脚本

执行 curl 获取的脚本时将参数传递给 bash

如何将 json 对象传递给 mvc 控制器

如何将 C++ 对象传递给 C# 类库