53

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.

2 Answers 2

53

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.

11
  • 1
    So basically, when you wrote <base-input v-model="username" require placeholder="enter your username"> it showed base input component. there we show another component which is <input> component and $attrs will be those that we didn't register as prop. so in your example, it will be placeholder and required and they will be passed to <input> element as props. am I right? May 20, 2019 at 18:24
  • 5
    @NikaKhurashvili Sort of. They are available in the $attrs attribute, but they are not actual props. Props are available directly on the component. e.g. a prop named "myProp" will be available on the component via this.myProp. This is not the case for attributes. Props are meant for actual data while attributes are meant to be used directly in the html of the template.
    – bernie
    May 20, 2019 at 19:12
  • 1
    So what happening when we don't bind v-bind="$attrs"? I see it works as normal.
    – Long Tran
    Oct 20, 2019 at 4:04
  • 5
    v-bind="$attrs" will tell vue that you wanna bind attrs supplied to the component to a given tag. Otherwise, it'll just disregard whatever isn't defined as a prop (because you'd effectively be trying to bind attrs to the top <template> tag which isn't actually rendered) see: vuejs.org/v2/api/#vm-attrs Oct 30, 2019 at 9:31
  • 2
    @appu In Vue 3 the style and class is available on $attrs. They also apply only on the component with v-bind="$attrs", not on the root element of component, when inheritAttrs: false. Sep 10, 2021 at 3:53
5

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

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

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

4
  • I was often using v-bind="$attr" but never knew about inheritAttrs. Thanks for the examples. It seems to me inheritAttrs=false is a cosmetical rather than anything practical. Or am I still missing something?
    – vir us
    Sep 14 at 20:28
  • 1
    it's for keeping the root element clean not exactly cosmetic I would say
    – canbax
    Sep 16 at 7:05
  • trying to understand why to use it. Can't clearly get it from the docs. Would you mind to clarify meaning of "clean" in this context? Also is it a Vue 3 specific feature? I can't see is it was in Vue2
    – vir us
    Sep 16 at 13:12
  • clean in this context means root element does not have attributes. These all was Vue 2. I don't know about Vue 3
    – canbax
    Sep 17 at 18:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.