xxxxxxxxxx
emit function is used to call in parent and write data in child component
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
<template>
<div>
<p>{{ text }}</p>
<button v-on:click="$emit('accepted')">OK</button>
</div>
</template>
<script>
export default {
props: ['text'],
emits: ['accepted']
}
</script>
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>