Vue $attrs Object
Example
Using the $attrs object to direct the id fallthrough attribute to the <p> tag.
<template>
<h3>Tigers</h3>
<img src="/img_tiger_small.jpg" alt="tiger">
<p v-bind="$attrs">Tigers eat meat and not plants, so they are called carnivores.</p>
</template>
See more examples below.
Definition and Usage
The $attrs object represents the fallthrough attributes and the event listeners set on the component tag.
We use v-bind="$attrs" on a root element when we want that element to inherit the fallthrough attributes and event listeners set on the component tag.
The $attrs object is read only.
Fallthrough Attributes are attributes (not props) set on the component tag, that falls through to the root element of the component. If there are more than one root element in the component, we use the $attrs object to specify which element that should inherit the fallthrough attributes. Learn more about fallthrough attributes in the tutorial.
More Examples
Example 1
Using the the $attrs object to display the fallthrough attributes id and title, and their values.
<template>
<h3>Tigers</h3>
<img src="/img_tiger_small.jpg" alt="tiger">
<p v-bind="$attrs">Tigers eat meat and not plants, so they are called carnivores.</p>
<hr>
<p><strong>Below is the content of the $attrs object:</strong></p>
<pre>{{ attrsObject }}</pre>
</template>
<script>
export default {
data() {
return {
attrsObject: null
}
},
mounted() {
console.log(this.$attrs);
this.attrsObject = this.$attrs;
}
}
</script>
<style>
#pink {
background-color: pink;
border-radius: 15px;
padding: 10px;
}
img {
width: 100%;
border-radius: 15px;
}
</style>
Example 2
Using the $attrs object on the <img> tag to receive an event listener from the parent component.
<template>
<h3>Toggle Image Size</h3>
<p>Click the image to toggle the image size.</p>
<img v-bind="$attrs" src="/img_tiger_small.jpg" class="imgSmall">
</template>
<style>
.imgSmall {
width: 60%;
}
.imgLarge {
width: 100%;
}
img {
border-radius: 15px;
cursor: pointer;
}
</style>
Related Pages
Vue Tutorial: Vue Fallthrough Attributes
Vue Tutorial: Vue Methods
Vue Tutorial: Vue v-bind Directive
Vue Tutorial: Vue v-on Directive
Vue Reference: Vue v-bind Directive
Vue Reference: Vue v-on Directive