将全局var传递给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

我认为你指的是动态道具

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

或使用简写语法

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

Answer 2

您可以研究此Vue.js example

创建变量

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

在你的组件中，你必须写关于道具

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

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

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

我没有在文档的指导下测试它是如何工作的。

Answer 3

您应该将item-data添加到props数组中，如下所示：

Vue.component('custom-component', {

  props: ['item-data'],

  ...

}