<template> <h2>Example $props Object</h2> <p>Name: <input type="text" v-model="name" placeholder="Your name here.."></p> <p> Bag weight (kg): <input type="range" v-model="weight" max="25" min="0"></p> <info-box v-bind:bag-owner=name v-bind:bag-weight=weight /> </template> <script> export default { data() { return { name: null, weight: null } } } </script>

 <template> <div> <h3>InfoBox.vue</h3> <p>This is the $props object that is received from App.vue and passed down to the next child component:</p> <pre>{{ this.$props }}</pre> <grand-child v-bind="$props" /> </div> </template> <script> export default { props: [ 'bagOwner', 'bagWeight' ] } </script> <style scoped> div { border: solid black 1px; padding: 10px; margin-top: 20px; max-width: 370px; } </style>

 <template> <div> <h4>Grand Child Component</h4> <p v-if="$props.bagOwner">Your name is <span>{{ $props.bagOwner }}</span>.</p> <p v-if="$props.bagWeight">Your bag weighs <span>{{ $props.bagWeight }}</span> kg.</p> </div> </template> <script> export default { props: [ 'bagOwner', 'bagWeight' ] } </script> <style scoped> div { border: solid black 1px; padding: 10px; max-width: 250px; box-sizing: border-box; } span { background-color: lightgreen; padding: 0 10px; } </style>

 import { createApp } from 'vue' import App from './App.vue' import InfoBox from './components/InfoBox.vue' import GrandChild from './components/GrandChild.vue' const app = createApp(App) app.component('info-box', InfoBox) app.component('grand-child', GrandChild) app.mount('#app')