1. props

Parent

foo:
bar:

bar を書き換えても、下側の子コンポーネントの doubleCount は不変

Child

title: abc
count: 123
doubleCount: 246

Child （props を分割代入）

count: 123
doubleCount: 246

2. emit

Parent

small>子コンポーネントでイベント発生したら、親が引数を alert

Child

3. 双方向バインディング

Parent

num: 0

子コンポーネントのイベントの引数で親の変数 num を更新する

親での受け取り方が違うだけで、子コンポーネントは全部同じ

Child

Child

Child

3-1. v-model

Parent

num: 0

子コンポーネントのイベントの引数で親の変数 num を更新する

親での受け取り方が違うだけで、子コンポーネントは全部同じ

Child

Child

3-2. .sync

Parent

num: 0

子コンポーネントのイベントの引数で親の変数 num を更新する

親での受け取り方が違うだけで、子コンポーネントは全部同じ

Child

Child

3-4. アンチパターン

Parent

foo: { "num": 0 }
bar: []
baz: Fri Mar 14 2025

オブジェクトや配列を渡すと子コンポーネントで直接中身を変更できてしまう

Child