簡単なpropsはなんとなく分かっていましたが、親コンポーネント側の配列を子コンポーネント内でfor文で回した時の挙動が難しかったので、
【Vue.js】子から親コンポーネントのデータを更新する方法｜たのしいWeb開発
を参考にさせていただき、少しまとめてみました。
1.親コンポーネント側で、配列fluitsを宣言。中には、2つのオブジェクトが入っている。
2.親コンポーネント側で子コンポーネントを表示した際に、for文で回して親コンポーネントの配列fluitsの中身を１つ１つ表示させている。
fluitの中のオブジェクトの要素数に応じて、表示する数は変動する。今回の表示は下記のようになる。
{{fluit.name}}={{subtotalCount}}
<button @click = "increment()">増やす</button>
<button @click = "reduce()">減らす</button>
{{fluit.name}}={{subtotalCount}}
<button @click = "increment()">増やす</button>
<button @click = "reduce()">減らす</button>
3.for文で親コンポーネントのオブジェクトを子コンポーネントに渡すときは、v-bind:【propsで渡す変数名】="配列データのキー"
4.子コンポーネント側で、clicked-increment-button,clicked-reduce-buttonが発火されたら、親コンポーネント側のincrementTotalCount,decrementTotalCount
を呼び出す、ということ。
この流れをemitと言い、子コンポーネントから親コンポーネントに値を渡すときに使用される。
子コンポーネント側でsubtotalCountが増減するのに合わせて、親コンポーネント側のtotalCountも増減する。