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

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'

If you set v-bind="$attrs"
and inheritAttrs: false
, you will see attributes are not on the root element (label) but on inner input.
