<template>
  <h2>Example emits Option</h2>
  <p>Custom events received from child component:</p>
  <p id="pElMsg">{{ message }}</p>
  <child-comp v-on:custom-event="getNofication" />
</template>

<script>
export default {
  data() {
    return {
      message: ' '
    }
  },
  methods: {
    getNofication(msg) {
      this.message += msg
    }
  }
}
</script>

<style>
#pElMsg {
  background-color: lightgreen;
  padding: 10px;
  margin: 0;
  max-width: 350px;
  display: inline-block;
  font-family: 'Courier New', Courier, monospace;
}
</style>                  

<template>
  <div>
    <h3>ChildComp.vue</h3>
    <p>Click the button to trigger the custom event with the "Hello!" message up to the parent component using the $emit() method.</p>
    <button v-on:click="notifyParent">Trigger</button>
  </div>
</template>

<script>
export default {
  emits: ['custom-event'],
  methods: {
    notifyParent() {
      this.$emit('custom-event','Hello! ')
    }
  }
}
</script>

<style scoped>
div {
  border: solid black 1px;
  padding: 10px;
  max-width: 350px;
  margin-top: 20px;
}
</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')