While attempting to list a custom event in the component's emits option, I encountered a console error. The code looked like this:
PARENT
<Btn
event-name="toggleSideMenu"
@toggle-side-menu="toggleHandler">
toggle
</Btn>
CHILD
<template>
<button @click="handleClick">
<slot></slot>
</button>
</template>
export default {
props: {
eventName: {
type: String,
default: ''
}
},
emits: [this.eventName], // This resulted in an Uncaught TypeError: Cannot read property 'eventName' of undefined
methods: {
handleClick() {
this.$emit(this.eventName)
}
}
}
Can someone guide me on the correct approach to make this work properly?