App.vue
InfoBox.vue
main.js
<template>
<h2>Example $props Object</h2>
<p>
Bag weight: <br>
<input type="range" v-model="weight" min="0" max="20"> {{ weight }} kg
</p>
<info-box v-bind:bag-weight=weight />
</template>
<script>
export default {
data() {
return {
weight: 4
}
}
}
</script>
<template>
<div>
<h3>InfoBox.vue</h3>
<p>The $props object is used in a computed value to create a message based on the weight of the bag:</p>
<span>{{ this.bagWeightStatus }}</span>
</div>
</template>
<script>
export default {
props: [
'bagWeight'
],
computed: {
bagWeightStatus() {
if(this.$props.bagWeight>10) {
return 'Puh, this bag is heavy!'
}
else {
return 'This bag is not so heavy.'
}
}
}
}
</script>
<style scoped>
div {
border: solid black 1px;
padding: 10px;
max-width: 350px;
margin-top: 20px;
}
span {
background-color: lightgreen;
padding: 5px 10px;
font-weight: bold;
}
</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')