What are inheritAttrs: false and $attrs used for in Vue?

Have a look at the “Disabling Attribute Inheritance” section of the docs and the api description 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.