<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')