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; 
    } 
    } 

}) 

それではI

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; 
    } 
    } 

})