<script> const emit = defineEmits(["userDeleted", "editUserData"]) const deleteUser = (user) => { emit("userDeleted", user); } const editUser = (user) => { emit("editUserData", user); } </script> <td> <a href="#" @click.prevent="editUser(user)"><i class="fa fa-edit"></i></a> <a href="#" @click.prevent="confirmUserDelete(user)"><i class="fa fa-trash text-danger ml-2"></i></a> </td>const emits = defineEmits(["updatedcount"]) emits("updatedcount", store.count);<script setup> const props = defineProps({ foo: String }) const emit = defineEmits(['change', 'delete']) // setup code </script> 1<template> <div> <p>{{ text }}</p> <button v-on:click="$emit('accepted')">OK</button> </div> </template> <script> export default { props: ['text'], emits: ['accepted'] } </script>// This is in child component // use this after some process in methods this.$emit('event-name', 'Hello, I'm Suman') ——————┐ │ // parent component │ <template> │ <child-component │ @event-name="someFuncToCall" <—————————————————┘ > </child-component> </template> <script> export default { methods: { someFuncToCall(arg) { console.log(arg); //Hello, I'm Suman } } } </script>this.$emit('myEvent')