So you say
" So both of them are used to carry out the same task. In the first case, we passed a value to the parent via an event and the parent then executes a method or does what's needed with that value. In the second case, we passed the method to be executed to the child itself, expecting it to execute the method on behalf of the parent."
And then you say there's not much difference other than stylistic. This is completely wrong and misleading. By having a child emit and event up that the parent handles, you create a looser coupling. By passing down a method that the parent expects the child to execute, you've now tightly coupled those 2 component.
The difference is, that in the former scenario, the parent only needs to know how to handle an event it expects, and the child only needs to know to emit an event up. In the latter scenario, the child needs to know specifically what method it's expected to execute. Additionally, it now has to also declare a property to receive that method.
Whilst the difference may seem subtle, trust me in terms of tightly vs loosely couple components, and refactoring/boilerplate etc, it definitely makes a substantial difference.
Vue docs very clearly dictate that the coupling pattern of components is data down, events up. Objectively, you're doing your readers and their clients/future developers that will inherit their code a dis-service by going against this pattern.
If you're going to teach, teach the correct principles please.
I'm not sure if you read the article from the start or not, but I'm not teaching anyone anything.
This is all that I got from the Full Stack Radio podcast episode that I linked to. I listened to the podcast episode and wrote what I understood in my own words to share with people who might not have heard about the podcast or prefer reading rather than listening.
Now I'm not saying what Chris Fritz said is wrong. It could be that I misunderstood what he said. I'll listen to it again closely and look at the Vue docs about the coupling pattern you mentioned. I'll make changes to the article when I increase my understanding of it.
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.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
So you say
" So both of them are used to carry out the same task. In the first case, we passed a value to the parent via an event and the parent then executes a method or does what's needed with that value. In the second case, we passed the method to be executed to the child itself, expecting it to execute the method on behalf of the parent."
And then you say there's not much difference other than stylistic. This is completely wrong and misleading. By having a child emit and event up that the parent handles, you create a looser coupling. By passing down a method that the parent expects the child to execute, you've now tightly coupled those 2 component.
The difference is, that in the former scenario, the parent only needs to know how to handle an event it expects, and the child only needs to know to emit an event up. In the latter scenario, the child needs to know specifically what method it's expected to execute. Additionally, it now has to also declare a property to receive that method.
Whilst the difference may seem subtle, trust me in terms of tightly vs loosely couple components, and refactoring/boilerplate etc, it definitely makes a substantial difference.
Vue docs very clearly dictate that the coupling pattern of components is data down, events up. Objectively, you're doing your readers and their clients/future developers that will inherit their code a dis-service by going against this pattern.
If you're going to teach, teach the correct principles please.
I'm not sure if you read the article from the start or not, but I'm not teaching anyone anything.
This is all that I got from the Full Stack Radio podcast episode that I linked to. I listened to the podcast episode and wrote what I understood in my own words to share with people who might not have heard about the podcast or prefer reading rather than listening.
Now I'm not saying what Chris Fritz said is wrong. It could be that I misunderstood what he said. I'll listen to it again closely and look at the Vue docs about the coupling pattern you mentioned. I'll make changes to the article when I increase my understanding of it.
Thank you for pointing it out :)
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.