Lately, I have been focused on AngularJS development but recently I started exploring Vue.js and going through its guide. On one of the pages, I came across the following:
By default, all props form a one-way-down binding between the child property and the parent one: when the parent property updates, it will flow down to the child, but not the other way around. This default is meant to prevent child components from accidentally mutating the parent’s state, which can make your app’s data flow harder to reason about.
You can find this information at https://vuejs.org/guide/components.html#Prop-Binding-Types.
I am curious about the principles guiding the use of two-way binding versus one-way binding. In situations where the child component needs to handle an array variable, it seems logical that two-way binding would be beneficial.
For instance, if I were to create my own version of selectize.js using Vue.js or AngularJS, utilizing two-way binding would involve passing the parent component's array to the selectize component for management.
In cases where two-way binding isn't used, other options would entail either manual updating of the array by the parent component, setting the array via a function passed to the child component, or having the child dispatch an event to update the parent's array.
Both alternatives seem more verbose and less advantageous compared to two-way binding. This scenario could apply to many components, such as a product-selector component where managing selected products becomes easier when the component handles the array reflecting these selections.
My key inquiries regarding this matter are:
Is my understanding of the alternatives to two-way binding correct?
Are there specific advantages to employing one-way-down binding in the mentioned cases? The alternatives don't seem to offer significant benefits in preventing unintentional changes to the parent's state.
If (1) and (2) are accurate, can you provide an example where one-way-down binding clearly prevents "accidental mutations to the parent's state"?