Vue 3 event naming conventions confusing me

user_15581701 0
Viewed 952

Inside my parent component, I have a child component:

<upsetting-moment-step
    :this-step-number="1"
    :current-step-number="currentStepNumber"
    @showNextStep="showNextStep"
></upsetting-moment-step>

My parent component also has this method:

methods: {
    showNextStep() {
        this.currentStepNumber++;
    }
},

I call this event from a button in my child component:

<button type="button" class="btn btn-lg btn-primary" @click="showNextStep">Continue</button>

Here is the child component method:

methods: {
    showNextStep() {
        this.$emit('showNextStep');
    }
},

Now this works great, but I'm confused, because it stops working when I use @show-next-step instead of @showNextStep in the child component tag.

According to the docs, it SHOULD work, and it is also the recommended way of doing it. However, it simply does not work.

What's funny, is if I change it to snake case, it works if I use this.$emit('show-next-step');. However, this is confusing me, because I'm able to pass my props via snake case, and use them in my component via camel case.

Am I doing something wrong?

vuejs3 vue.js javascript
2 Answers

In your component upsetting-moment-step you are using an event with the name @showNextStep, @ - says it is an event. So, to run some action for the event you need to emit it first (The name must be the same as in the component. this.$emit('showNextStep'); to emit the event. Once you emit the event, up to your code, function showNextStep will run.

The naming convention is to write using camelCase for JS, and kebab-case for tags and events.

user_167854850

The automatic case transformation of event names should work per documentation, as you described. However, there is a known bug (@vuejs/vue-next #2841) in versions 3.0.0 to 3.0.5.

The fix was released in 3.0.6, but you should probably update to the latest version (3.2.7 as of today).

user_62771510
Related