Referring to these sources:
Forum Post Stack Overflow Question
In my project, I am utilizing:
The setup involves the parent component listening for events emitted by a child component:
mounted() {
this.$on("edit-category", (taskItemParam) => {
console.log("Received edit-category event with payload:", taskItemParam);
});
this.$on("delete-category", (taskItemParam) => {
console.log(
"Received delete-category event with payload:",
taskItemParam
);
});
},
The child component, on the other hand,
is responsible for emitting two distinct events:
<div class="modal-body" @click="emitEditCategory()">
<slot name="name"> Edit Name </slot>
</div>
<div class="modal-body" @click="emitDeleteCategory()">
<slot name="delete"> Delete Category </slot>
</div>
methods: {
...
emitEditCategory() {
this.$emit("edit-category", this.taskItemLocal);
console.log("Emitting edit-category");
},
emitDeleteCategory() {
this.$emit("delete-category", this.taskItemLocal);
console.log("Emitting delete-category");
},
},
The main query arises as to why the emitted events fail to propagate to the parent component. Understanding the event scope in vue from a child-to-parent hierarchy is essential in addressing this issue.