Передача глобального var в атрибут компонента vue

Question

Я пытаюсь передать данные php/laravel в свой компонент из пользовательской глобальной переменной. Я видел примеры этого вдаваясь в «новой 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'], 

    ... 

}