子コンポーネントに基づく計算されたプロパティ

Question

子コンポーネントのデータに依存する計算されたプロパティを作成できますか？あなたはことができますが、それはだ簡単な作業のように思えるが、私はそれを把握することはできません...

fooのコンポーネント

<template> 
    {{ foo }} 
</template> 

<script> 
export default { 
    computed: { 
     foo() { 
      return Math.random() 
     } 
    } 
} 
</script> 

親コンポーネント

<template> 
    foo computed property sum: {{ sum }} 
    <Foo v-for="n in 10"></Foo> 
</template> 

export default { 
    computed: { 
     sum() { 
      // return...?    
     } 
    } 
} 
</script> 

Answer 1

物事に対する非常に珍しいアプローチなので、達成しようとしているもののための最良の選択ではない可能性があります。

代わりに、データを親に保持し、コンポーネントにプロップとして渡すことができます。小道具名としてvalueを使用すると、v-modelからきれいな構文が得られます。 （you can't v-model an aliasという事実のためにfoos[index]を使用しなければなりませんが、この場合は、とにかくインデックスを生成しています）。

new Vue({ 
 
    el: '#app', 
 
    data: { 
 
    foos: [] 
 
    }, 
 
    computed: { 
 
    sum() { 
 
     return this.foos.reduce((a, b) => a + b, 0); 
 
    } 
 
    }, 
 
    components: { 
 
    Foo: { 
 
     template: '<div>{{ value }} <button @click="reroll">Change it</button></div>', 
 
     props: ['value'], 
 
     created() { 
 
     this.reroll(); 
 
     }, 
 
     methods: { 
 
     reroll() { 
 
      this.$emit('input', Math.floor(Math.random() * 10)); 
 
     } 
 
     } 
 
    } 
 
    } 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script> 
 
<div id="app"> 
 
    foo computed property sum: {{ sum }} 
 
    <Foo v-for="index in 10" v-model="foos[index]"></Foo> 
 
</div>