$parent en Vuejs 2, acceso a datos del componente padre

El comportamiento más normal en Vuejs 2 es montar una jerarquía de componentes para poder segmentar al máximo nuestra aplicación, formularios, botones, cajas de contenido etcétera.

Imagina que tienes un componente llamado PostsComponent.vue (fíjate en la forma plural) y otro llamado PostComponent.vue (singular), el primero mostrará todos los posts utilizando el segundo en un bucle.

1PostsComponent.vue

<template>
  <div>
    <post-component v-for="(post, index) in posts" :key="index"></post-component>
  </div>
</template>

<script>
import PostComponent from './PostComponent';
export default {
  name: 'posts-component',
  components: {
    PostComponent
  },
  data () {
    return {
      posts: [],
      category: 'Programación'
    }
  },
  mounted () {
    axios.get('https://jsonplaceholder.typicode.com/posts')
    .then(response => response.json())
    .then(posts => this.posts = posts)
  }
}
</script>

2PostComponent.vue

<template>
  <div>
    <div class="card" style="width: 18rem;">
        <div class="card-body">
          <h5 class="card-title">{{ post.title }}</h5>
          <p class="card-text">{{ post.body }}</p>
          <a href="/posts" class="btn btn-primary">Go back</a>
        </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'post-component',
  props: {
    post: {
      type: Object
    }
  }
}
</script>

Lo importante aquí es fijarse en el dato category del componente PostsComponent, lo normal para utilizar ese dato en el componente hijo sería lo siguiente.

<post-component v-for="(post, index) in posts" :key="index" :category="category"></post-component>

Pero claro, si en lugar de 1 dato a pasar, debemos pasar 10, todo se complica y se vuelve bastante feo. El objeto $parent en Vuejs 2 nos permite conseguir esto sin la necesidad de modificar el componente padre.

<template>
  <div>
    <div class="card" style="width: 18rem;">
        <div class="card-body">
          <h5 class="card-title">{{ post.title }} - {{ $parent.category }}</h5>
          <p class="card-text">{{ post.body }}</p>
          <a href="/posts" class="btn btn-primary">Go back</a>
        </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'post-component',
  props: {
    post: {
      type: Object
    }
  }
}
</script>

Si te fijas en la etiqueta h5, estamos utilizando el dato category del componente padre, así de simple es tener acceso a datos del componente padre en Vuejs 2.