<template> <h2>Example $emit() Method</h2> <p>Ratings received from child component:</p> <ul id="ulElRatings"> <li v-for="x in ratings">{{ x }}</li> </ul> <child-comp v-on:message-sent="receiveEmit" /> </template> <script> export default { data() { return { ratings: ['Hairdrier, rating: 7'] } }, methods: { receiveEmit(name,rating) { const item = name + ', rating: ' + rating; this.ratings.push(item); } } } </script> <style> #ulElRatings { background-color: lightgreen; padding: 20px; max-width: 300px; font-family: 'Courier New', Courier, monospace; } </style>

 <template> <div> <h3>ChildComp.vue</h3> <p>Rate a product:</p> <input type="text" v-model="productName" placeholder="Product name.." ref="inpName"> <input type="number" v-model="productRating" placeholder="Rating 1 to 10.."> <button v-on:click="send">Register</button> </div> </template> <script> export default { data() { return { productName: null, productRating: null } }, methods: { send() { this.$emit('message-sent',this.productName,this.productRating); this.productName = null; this.productRating = null; this.$refs.inpName.focus(); } }, mounted() { this.$refs.inpName.focus(); } } </script> <style scoped> div { border: solid black 1px; padding: 10px; max-width: 350px; margin-top: 20px; } input { display: block; margin-bottom: 15px; } </style>

 import { createApp } from 'vue' import App from './App.vue' import ChildComp from './components/ChildComp.vue' const app = createApp(App) app.component('child-comp', ChildComp) app.mount('#app')