将全局变量传递给 vue 组件属性

Question

我正在尝试将 php/laravel 数据从自定义全局变量传递到我的组件。我已经看到直接进入 new Vue({}) 区域的示例，但我还没有看到任何通过直接进入组件

来传递它的方法

<script>
var itemData = //json object
</script>

<custom-component item-data="ITEMDATAVAR"></custom-component>

我应该在我的组件道具中指定 item-data。问题是我不确定如何告诉我的组件 html 我传递的是变量 itemData 的值而不是字符串 "itemData"

Answer 1

你可以研究这个Vue.jsexample

创建变量

new Vue({
    el: '#el',
    data: yourJsonObject
})

在你的组件中你必须写关于 props

Vue.component('custom-component', {
    props: ['item-data']
    ...
}

以同样的方式将数据传递给组件

<custom-component item-data="ITEMDATAVAR"></custom-component>

我没有根据文档的指导测试它的工作原理。

Answer 2

您应该像这样将 item-data 添加到 props 数组：

Vue.component('custom-component', {

  props: ['item-data'],

  ...

}

Answer 3

我认为你指的是动态道具

<custom-component v-bind:item-data="ITEMDATAVAR"></custom-component>

或使用shorthand语法

<custom-component :item-data="ITEMDATAVAR"></custom-component>

Passing a global var to a vue component attribute