Question: As the question suggests, I can't figure out their meaning and why I should use it. It's said that it can be used so that when we have many components and we want to pass data from parent to the child's child's child's component, we don't have to use props. Is this true?

It'd be nice If you could provide an easier example. Vue.js docs don't mention much on it.

Answer: 
Have a look at the ["Disabling Attribute Inheritance"](https://v2.vuejs.org/v2/guide/components-props.html#Disabling-Attribute-Inheritance) section of the docs and the [api description](https://v2.vuejs.org/v2/api/#inheritAttrs) for the full details.

It's main usage is to define so-called "transparent" components that pass-through attributes. The example given in the doc is a component wrapping an `input` element:

```
// Component
Vue.component('base-input', {
  inheritAttrs: false,
  props: ['label', 'value'],
  template: `
    <label>
      {{ label }}
      <input
        v-bind="$attrs"
        v-bind:value="value"
        v-on:input="$emit('input', $event.target.value)"
      >
    </label>
  `
})

// Usage
<base-input
  v-model="username"
  required
  placeholder="Enter your username"
/>

```

The `required` and `placeholder` attributes are then set on the `input` instead of the wrapping `label`.

It doesn't really have anything to do with children of children of components but it can be used in such a hierarchy.

I hope that clears things up for you.
For me talking about `$attrs` and `inheritAttrs` together, makes it harder to understand. So I will show a bit more observations.

I will call my base-inp from HTML like below

```
<base-inp label="Username:" v-model="username" 
required placeholder="Enter your username"></base-inp>

```

The HTML for base-inp is like below

```
<label>
    {{ label }}
    <input v-bind="$attrs" :value="value" @input="$emit('input', $event.target.value)" />
</label>

```

`v-bind="$attrs"` is used to bind attributes.

If you set `v-bind="$attrs"` and `inheritAttrs: true` (default) and render your base-inp component. It will render
[![enter image description here](https://i.stack.imgur.com/64zBR.png)](https://i.stack.imgur.com/64zBR.png)

So basically we are passing the attributes entered into base-inp component in the HTML template. And also into 'input' inside the base-inp. You can see 'placeholder' in both 'label' and 'input'.

If we delete `v-bind="$attrs"`, the placeholder won't be an attribute in inner 'input'
[![enter image description here](https://i.stack.imgur.com/buy27.png)](https://i.stack.imgur.com/buy27.png)

If you set `v-bind="$attrs"` and `inheritAttrs: false`, you will see attributes are not on base-inp but on inner input.
[![enter image description here](https://i.stack.imgur.com/02y7p.png)](https://i.stack.imgur.com/02y7p.png)