The inheritAttrs Option in Vue

By default, attributes on the component "fall through" to the rendered element. In the following example, the top-level <div> in the MyComponent template will inherit the class="style-div" attribute.

// MyComponent.js
Vue.component('MyComponent', {
  template: `<div>Hello World</div>`
});

// index.js
<MyComponent class="style-div" />

In other words, the rendered element would look like the following.

<div class="style-div">Hello World</div>

inheritAttrs

Setting inheritAttrs to false prevents this fall through behavior. In the following example, the <div> in MyComponent will not inherit the class attribute, or any other attribute.

Vue.component('MyComponent', {
  inheritAttrs: false,
  template: `<div>Hello World</div>`
});

The rendered element would look like the following.

<div class="style-div">Hello World</div>

We find inheritAttrs is useful in cases where you want to define an internal event handler that fires the user-specified event handler. For example, we use inheritAttrs for our async-button component, which executes an async function when the button is clicked and disables the button for the duration of the async function. The async-button component needs to execute some logic to disable itself, in addition to executing the user-specified @click handler.

app.component('async-button', {
  data: () => ({
    status: 'init'
  }),
  inheritAttrs: false,
  methods: {
    // When the user clicks the button, we actually call
    // the `handleClick()` method first...
    async handleClick(ev) {
      if (this.status === 'in_progress') {
        return;
      }
      this.status = 'in_progress';
      try {
        // and the `handleClick()` method calls the user-specified
        // `@click` handler. `this.$attrs` refers to the attributes
        // specified on `<async-button>` in HTML.
        await this.$attrs.onClick(ev);
      } catch (err) {
        this.status = 'error';
        throw err;
      }
      this.status = 'success';
    }
  },
  computed: {
    // Use "selective binding". Bind all attributes _except_
    // `onClick` and `disabled`, because `async-button` wraps
    // those attributes. Styles and class names still fall through.
    attrsToBind() {
      const attrs = { ...this.$attrs };
      delete attrs.onClick;
      delete attrs.disabled;
      return attrs;
    },
    isDisabled() {
      return this.status === 'in_progress' || this.$attrs.disabled;
    }
  },
  template: template
});

Below is the HTML for the async-button component. Note that v-bind binds any additional attributes, other than disabled and onClick.

<button v-bind="attrsToBind" :disabled="isDisabled" @click="handleClick">
  <slot></slot>
</button>

---

---

More Vue Tutorials