DEV Community

Discussion on: Are you committing these mistakes as a Vue developer?

Collapse
 
mgandley profile image
Matt Gandley

Eh, I don't agree with your needlessly scathing criticism of this.

You are correct, that the Vue docs do teach the concepts in the way you described. You are incorrect that using a callback method as a prop instead of responding to an event is the correct way to do this (see this thread: forum.vuejs.org/t/events-vs-callba...).

Your statement that callback props enforce tightly coupling is wrong. You are assuming that the child component must have information about the parent component's function, and must pass the correct values to that function as a result. Flip this concept on its head - you can design your child components to call whatever callback function is passed with a set of values, in the same way that a child emits a set of values. No real difference - the onus is on the parent component to design its callback / emit-responding function to handle the returned data correctly. We have plenty of JS APIs that work this way - you don't dictate what DOM events return, you respond to the parameters that are being returned.

The advantage that the callback prop method has over the emit method is that callback functions can be required, validated, and defaulted. You cannot require a parent component to respond to an emitted event. You could lose hours of work figuring out silent "failures" where a parent component is not responding to an emitted event.

The advantage that the emit method has over the callback method is that your child component does not need to check for or validate the presence of a prop. Your child component can just emit events. It's the literal inverse of the callback method's advantage.