Dear community, I am facing an issue with emitting events from my child component to the parent. Strangely, all other components work perfectly fine with the same code except for this particular one.
Let me provide you with the relevant code snippets:
Child Component:
emits: ['close', 'delete-component'],
methods: {
close() {
this.$emit('close');
},
deleteMethod() {
this.$emit('delete-component',this.index);
}
},
Parent Component:
<SmallModal :index="ComponentToDelete" :show="DeletingComponent"
@delete-component="deleteComponent($event)" @close="DeletingComponent = false">
</SmallModal>
Just a heads up - I have tried changing the naming convention multiple times but that doesn't seem to be the issue here.
Upon encountering this problem, the following error message is displayed:
[Vue warn]: Extraneous non-emits event listeners (deleteComponent) were passed to the component but could not be automatically inherited because the component renders fragment or text root nodes. If the listener is intended to be a component custom event listener only, declare it using the "emits" option.