Jordan Oroshiba
Aug 29, 2017 · 1 min read

I realize this is what many people refer to as two way binding in Angular 2 or VueJS, but it isn’t two way binding. It’s referred to this way so that AngularJS (angular 1.x) devs can google “how to two way bind” can figure out how to update parent state.

2 way binding by it’s very nature involves the state of the child being watched and automatically updated in the parent, keeping the two in constant sync.

With this type of binding (which Vue and Angular2 have), I can have an autocomplete, for example, where you type and search and this is changing the child components value. I click out and it doesn’t update, it only updates if I hit submit or click a value which triggers the emit. The updates are explicitly triggered. I could get similar functionality by passing in a function and calling it with a parameter in the child which updates as well.

Now this behavior is a little different from what I see in react in that from what I see in react it is typically done functionally and the state cannot be updated, you have to generate a new one with updated information.

I come at this from the viewpoint of an AngularJS dev who deals with 2 way binding hell, and patterns like this 1.5 way binding actually solve a lot of those issues. You can always create watches that sync and update things, it is just a matter of forcing you to do so explicitly making it much much easier to debug.

)

    Jordan Oroshiba

    Written by