In the parent component, there is a child component:
<upsetting-moment-step
:this-step-number="1"
:current-step-number="currentStepNumber"
@showNextStep="showNextStep"
></upsetting-moment-step>
The parent component also includes this method:
methods: {
showNextStep() {
this.currentStepNumber++;
}
},
The event is called from a button inside the child component:
<button type="button" class="btn btn-lg btn-primary" @click="showNextStep">Continue</button>
Here is the method in the child component:
methods: {
showNextStep() {
this.$emit('showNextStep');
}
},
Everything works fine, but there's confusion when using @show-next-step instead of @showNextStep in the child component tag.
Despite what the documentation states, it should work with snake case and is recommended, however it doesn't seem to function properly.
An interesting discovery is that if changed to snake case, it works with this.$emit('show-next-step');. This leads to confusion as props are passed in snake case and used in camel case within the component.
Is there something missing?