Vue: Reasons to use props instead of referencing parent data?

Question

In VueJS, I have seen different ways of accessing parent properties from a component. Say I want to use the parent property items in my component.

Answer 1

The props should be mutated in the parent component, according to the official doc :

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 prevents child components from accidentally mutating the parent’s state, which can make your app’s data flow harder to understand.

In addition, every time the parent component is updated, all props in the child component will be refreshed with the latest value. This means you should not attempt to mutate a prop inside a child component. If you do, Vue will warn you in the console

So in order to update props from child component you should use this.$emit event and send the new value in order to handle the update in the parent one.