Vue: Reasons to use props instead of referencing p

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.

First way

The component has a props value bound to a parent property:

.js

Vue.component("example", {
  template: "<div></div>",
  props: ["myItems"]
});

.html

<example v-bind:my-items="items"></example>

Second Way

The child component accesses a parent's properties directly, like this:

this.$parent.items

Question

Is there a reason to use the more elaborate first method over the second? Is there an overhead to "duplicating" data like that, vs. accessing it directly when needed?

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.