How to emit custom events from child components to parent components in vue?

Use the $emit method to trigger custom events in child components:

<!-- Child Component -->
<template>
  <button @click="notifyParent">Click me</button>
</template>

<script>
export default {
  methods: {
    notifyParent() {
      this.$emit('custom-event', 'Data sent to parent');
    }
  }
};
</script>

<!-- Parent Component -->
<template>
  <child-component @custom-event="handleEvent"></child-component>
</template>

<script>
export default {
  methods: {
    handleEvent(data) {
      console.log('Received data from child:', data);
    }
  }
};
</script>