從實例化將數據傳遞到Vue的組件

Question

比方說，我有一個Vue的組件：

<item v-bind:orangeFruit ></item> 

，我想從我的Vue實例一些計算性能經過：

var fruits = { 
    fruit1:'apple', 
    fruit2:'orange', 
    fruit3:'strawberry' 
} 

new Vue({ 
    el: '#app', 
    data: { 
    return fruits 
    }, 
    computed: { 
    orangeFruit: function(){ 
     // Assume this is much more complicated than just fetching a key 
     return this.fruit2; 
    } 
    } 

}) 

於是我'd做類似的事情：

Vue.component('item, 
    template:` 

    // This should fetch the computed property from instantiation 
    <p>{{ orangeFruit }}</p> `, 

    props: { 
    orangeFruit 
    } 
) 

但是這會一直返回orangeFruit undefined錯誤。

Answer 1

試試這個：

<item v-bind:orangeFruit ></item> 

應該是：

<item :orangeFruit="orangeFruit"></item> 

您的代碼應該是這樣的：

new Vue({ 
    el: '#app', 
    data: { 
    fruits : fruits 
    }, 
    computed: { 
    orangeFruit: function(){ 
     // Assume this is much more complicated than just fetching a key 
     return this.fruits.fruit2; 
    } 
    } 

})