TRADEOFF BATTLE
Props and emits vs provide and inject for Vue component communication
A Vue page has nested UI wrappers and deep child components that need shared context and user actions. Would you use props and emits or switch to provide and inject?
The prompt
You are building a Vue 3 settings workflow. `SettingsPage` owns the current draft, validation state, and save actions. Under it, the page has several layout layers such as `SettingsSection`, `SectionCard`, and `FieldGroup`, and the real leaf components are toggles, text inputs, and status chips. Those leaf components need access to the shared form context and must report user changes back up. One teammate wants to keep everything with props and emits so the data flow stays explicit. Another teammate wants to provide a narrow settings context from the page and inject it in the deep field components so the layout wrappers stop forwarding props they do not actually care about. In the interview, the panel asks which direction you would defend.
Pick the direction you would defend
You are not looking for the universal winner. You are picking the strongest answer for this prompt.
Commit to a direction
Pick the option you would defend, then reveal the stronger interview framing for this prompt.