Javascript is required
Mokkapps LogoMichael Hoffmann

Vue Tip: Disable Attribute Inheritance

Michael Hoffmann (Mokkapps) - Senior Frontend Developer (Freelancer)
Michael Hoffmann
Dec 10, 2022
1 min read
|
73 views
Template
Script
Vue Tip: Disable Attribute Inheritance Image

By default, parent scope attribute bindings that are not recognized as props will "fallthrough". This may not always be the desired behavior and, therefore, can be disabled.

Info

I wrote a dedicated tip about fallthrough attributes.

A short explanation of fallthrough attributes: When we have a single-root component, these bindings will be applied to the root element of the child component as standard HTML attributes.

This may only sometimes be the desired behavior when authoring a component that wraps a target element or another component.

By setting inheritAttrs to false, this default behavior can be disabled. The attributes are available via the $attrs instance property and can be explicitly bound to a non-root element using v-bind.

Let's take a look at an example. In this component, the <input> element that should receive the attributes is wrapped inside a <label> element. By default, the <label> element would inherit the attributes but we will fix that:

<script>export default {  inheritAttrs: false,  props: ['label', 'value'],  emits: ['input'],}</script><script setup>const count = ref(0)</script><template>  <label>    <span>{{ label }}: {{ count }}</span>    <input v-bind="$attrs" v-bind:value="value" v-on:input="$emit('input', $event.target.value)" />  </label></template>

By using inheritAttrs: false, the attributes do not "fallthrough" on the root node (<label>). We manually bound them to the <input> element via v-bind="$attrs".

As you can see in this example, it's absolutely valid to add two script blocks.


If you liked this Vue tip, follow me on Twitter to get notified about new tips, blog posts, and more. Alternatively (or additionally), you can subscribe to my weekly Vue newsletter.