App.vue
InfoBox.vue
main.js
<template>
<h2>Example $attrs Object</h2>
<p>There are three elements on the root level of the component.</p>
<p>The v-bind="$attrs" adds a click event to the img tag, set from the parent component.</p>
<div>
<info-box
v-on:click="toggleClass"
/>
</div>
</template>
<script>
export default {
methods: {
toggleClass(evt) {
if(evt.target.className === 'imgLarge'){
evt.target.className = 'imgSmall'
}
else {
evt.target.className = 'imgLarge'
}
}
}
}
</script>
<style scoped>
div {
border: solid black 1px;
padding: 10px;
width: 280px;
}
</style>
<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>
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')