子コンポーネントはどのようにして親に通信し直しますか？

Question

Accepted Answer

子コンポーネントは親に対して**イベントを発信**することで*上向きに*通信します。親は `@event-name` でそれらをリッスンします。これにより Vue の一方向データフローが完成します:**props は下へ、イベントは上へ**。 ## 子から発信する ```vue ``` ## 親でリッスンする ```vue ``` 子は親のデータを直接変更することはできません（またそうべきではありません）。代わりにペイロード付きイベントを発信することで親に*アクションを促します*。親がデータを所有しており、変更を行います。 ## defineEmits で emits を宣言する理由 ```js const emit = defineEmits(["delete"]); // documents the component's API // or with validation / TypeScript: const emit = defineEmits<{ delete: [id: number] }>(); ``` 発信されるイベントを宣言することで、コンポーネントの「出力」を文書化でき、ペイロードの型チェックが可能になり、そしてイベントが誤ってネイティブ DOM リスナーとして扱われるのを防ぎます。 ## 他の通信パターン ```text props + emits → parent ↔ direct child (the default, most common) provide/inject → pass data deep down without prop-drilling Pinia store → shared state across unrelated/distant components v-model → two-way binding (props + emit sugar) ``` ## なぜ重要なのかイベントの発信は、子が親の状態に影響を与えるための標準的で予測可能な方法です — 一方向データフロー（アプリを推論しやすくデバッグしやすくする）を保ちながら。 `defineEmits` + `@listener` を知ることや、非親子通信のために `provide/inject` や Pinia にいつ卒業するかを知ることは、Vue のコンポーネント通信モデル全体をカバーします。