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:
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 X to get notified about new tips, blog posts, and more. Alternatively (or additionally), you can subscribe to my weekly Vue & Nuxt newsletter:
Vue Tip: Dynamically Add & Remove Route While App Is Running
Adding routes to your router is usually done via the `routes` option, but in some situations, you might want to add or remove routes while the application is already running.
Vue Tip: Avoid Mutating a Prop Directly
Mutating props is an anti-pattern. You should use computed properties instead.