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>