將全局變量傳遞給vue組件屬性

Question

我試圖從自定義全局變量將php/laravel數據傳遞給我的組件。我見過進入了這方面的例子「新的Vue（{}）」區域直接，但我還沒有看到任何方式進入右到組件

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

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

我應該指定，我通過這在我的組件道具中有「item-data」。問題是，我不知道如何告訴我傳遞變量「的ItemData」，而不是字符串「的ItemData」我的組件的HTML

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'], 

    ... 

}