Example of using custom events in Vue

CustomEvents.vue

<!-- Parent Component -->
<template>
  <div>
    <ChildComponent
      :numbers="numbers"
      @number-added="numbers.push($event)"
    />
  </div>
</template>

<script>
import ChildComponent from "./ChildComponent";

export default {
  name: "ParentComponent",
  data() {
    return {
      numbers: [1, 2, 3]
    };
  },
  components: {
    ChildComponent
  }
};
</script>


<!-- Child Component -->
<template>
  <div>
    <h2>The numbers are {{ numbers }}!</h2>
    <input v-model="number" type="number" />
    <button @click="$emit('number-added', Number(number))">
     Add new number
    </button>
  </div>
</template>

<script>
export default {
  name: "ChildComponent",
  props: {
    numbers: Array
  },
  data() {
    return {
      number: 0
    };
  }
};
</script>