Vue Props and Emits

Definition

props は親から子へ渡す入力契約、emits は子から親へ通知する出力契約である。両者は Vue component 間通信の基本的な境界を構成する。

component 設計では、どの state を親が持ち、子は何を受け取り、何を通知するかが責務分割の中心になる。props と emits を曖昧にすると、双方向に依存した扱いづらい component になりやすい。

props は親から子へデータを渡すための仕組みであり、子コンポーネント側では外部入力として扱う。emits は子が状態変化やユーザー操作の結果を親へ知らせる仕組みであり、データ所有権そのものを子へ渡すわけではない。

この見方をすると、component は「入力を受け、内部で処理し、必要なイベントだけ外へ返す」契約単位になる。v-model も特別な魔法ではなく、props と emits の組み合わせとして理解できる。