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>
Run Example »
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>
Run Example »
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>
Run Example »
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