title: Vue JS: Pass data with props VS access directly to the parent data with this.$parent
body: <p>I am working on an app made with Vue JS. Despite I used props the most of the time to pass data from a parent component to a direct child component, I just realized that sometime I accessed directly to the parent data using <code>this.$parent</code> without a real reason.</p>
  
  <p>Vue JS documentation says: </p>
  
  <blockquote>
    <p>[...] you cannot (and should not) directly reference parent data
    in a child component’s template</p>
  </blockquote>
  
  <p>So why is it possible? Does this way provide some advantage in any very specific case? </p>
  
  <p>If there is any situation when it's better to use <code>this.$parent</code> to access to parent's properties or methods, then I would understand how to recognize it.</p>