App.vue
InfoBox.vue
main.js
<template>
<h2>Example $attrs Object</h2>
<p>There are four elements on the root level of the component.</p>
<p>The v-bind="$attrs" adds the "pink" id, and title fallthrough attributes to the p-tag.</p>
<p>(The title attribute creates a tooltip text when the mouse pointer hovers for a second or so over the pink p tag.)</p>
<div>
<info-box
id="pink"
title="This is the title"
/>
</div>
</template>
<style scoped>
div {
border: solid black 1px;
padding: 0 10px;
width: 250px;
}
</style>
<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>
import { createApp } from 'vue'
import App from './App.vue'
import InfoBox from './components/InfoBox.vue'
const app = createApp(App)
app.component('info-box', InfoBox)
app.mount('#app')