Javascript is required
Mokkapps Logo

Vue Tip: Use Fallthrough Attributes

Michael Hoffmann (Mokkapps) - Senior Frontend Developer (Freelancer)
Jun 15, 2022
1 min read
|
139 views
Template
Use Fallthrough Attributes Image

A "fallthrough attribute" is an attribute or v-on event listener that is passed to a component, but is not explicitly declared in the receiving component's props or emits. Common examples of this include class, style, and id attributes.

For example, given a <MyButton> component with the following template:

MyButton.vue
<template>  <button>Click Me!</button></template>

And a parent using this component with:

App.vue
<template>  <MyButton class="large" /></template>

The final rendered DOM would be:

<button class="large">Click me!</button>

If the child component's root element already has existing class or style attributes, it will be merged with the class and style values that are inherited from the parent:

MyButton.vue
<template>  <button class="btn">Click Me!</button></template>

Then the final rendered DOM would now become:

<button class="btn large">Click me!</button>

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