When working with VueJS, I've noticed different approaches to accessing parent properties from a component. For example, let's say I need to utilize the parent property items in my component.
Option One
In this method, the component has a props value that is bound to a parent property:
.js
Vue.component("example", {
template: "<div></div>",
props: ["myItems"]
});
.html
<example v-bind:my-items="items"></example>
Option Two
In the second approach, the child component directly accesses a parent's properties like so:
this.$parent.items
Question
Which method should be preferred - the more involved first option or the direct access of data through the second? Are there any performance considerations or overhead associated with duplicating data using the first method?