Unidirectional Data Flow in Vue
All props form a one-way binding between the child property and the parent: when the parent property is updated, it will be passed to the child, but not vice versa. This prevents child components from accidentally changing the parent state, which can make it difficult to understand the data flow of your application.
Additionally, every time the parent component is updated, all props of the child component will be updated with the latest values. This means that you should not try to change a prop inside a child component. If you do, Vue will display a warning in the console.
There are usually two cases where you are tempted to change an input parameter. Let's look at them.
Case one
The input parameter is used to pass an initial value; the child component wants to use it as a local data property later. In this case, it is best to define a local property in the data that uses the value of the input parameter as the initial value:
props: ['initialCounter'],
data() {
return {
counter: this.initialCounter
};
}
Case two
The input parameter is passed as a raw value that needs to be transformed. In this case, it is best to define a computed property using the input parameter:
props: ['size'],
computed: {
normalizedSize: function() {
return this.size.trim().toLowerCase();
}
}
Comment
Note that objects and arrays in JavaScript are passed by reference, so if the input parameter is an array or object, then changes inside the child component of this object or array will affect the state of the parent and Vue is not able to warn about this. Any mutation of input parameters, including objects and arrays, should be avoided, as ignoring one-way data binding can lead to undesirable results.
