Giving facility to send the data from Child component to Parent component,
it emits events in Child component then listen and reacts to the emitted event in Parent component.
xxxxxxxxxx
<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>
xxxxxxxxxx
<template>
<button @click="sendMessage">Send Message to Parent</button>
</template>
<script setup>
import { defineEmits } from 'vue';
// Khai báo sự kiện sẽ emit
const emits = defineEmits(["message-from-child"])
// Hàm để gửi thông điệp lên ParentComponent
function sendMessage() {
emits("message-from-child", 'Hello from child pass data to component parent');
}
</script>
xxxxxxxxxx
const emits = defineEmits(["updatedcount"])
emits("updatedcount", store.count);
xxxxxxxxxx
// 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>
xxxxxxxxxx
emit function is used to call in parent and write data in child component