20

I have two components, one contains another.

And when I trigger event from child I can't receive it in parent.

Child component

this.$emit('myCustomEvent', this.data);

Parent component

<parent-component v-on:myCustomEvent="doSomething"></parent-component>

But, when I changed event name to my-custom-event in both places it works.

Vue somehow transform event names? Or what can be a problem? I read docs about component naming convention but there nothing related to event naming

4 Answers 4

44

It is recommended to always use kebab-case for the naming of custom events. Lower case events, all smashed together, as recommended by @KoriJohnRoys would also work but are harder to read. It is not recommended to use camelCase for event naming.

The official documentation of Vue.JS states the following under the topic of Event Names:

Event Names

Unlike components and props, event names don’t provide any automatic case transformation. Instead, the name of an emitted event must exactly match the name used to listen to that event. For example, if emitting a camelCased event name:

this.$emit('myEvent')

Listening to the kebab-cased version will have no effect:

<my-component v-on:my-event="doSomething"></my-component>

Unlike components and props, event names will never be used as variable or property names in JavaScript, so there’s no reason to use camelCase or PascalCase. Additionally, v-on event listeners inside DOM templates will be automatically transformed to lowercase (due to HTML’s case-insensitivity), so v-on:myEvent would become v-on:myevent – making myEvent impossible to listen to.

For these reasons, we recommend you always use kebab-case for event names.

4
  • @Gjaa I've just retested it in Vue 2.6.10 and it still behaves the same. You probably have a problem somewhere else. Could you give some more information or ask a new question here on StackOverflow?
    – ssc-hrep3
    Nov 1, 2019 at 10:48
  • 1
    I had to emit my event using kebab case too for it to work, this.$emit('my-event'). Using camel case on my $emit didn't work :shrug:
    – Gjaa
    Nov 1, 2019 at 15:35
  • 3
    It is recommended to always use kebab-case for the naming of custom events. Using camelCase won't work.
    – ssc-hrep3
    Nov 1, 2019 at 16:31
  • Beware: this ONLY applies to Vue 2! Whereas Vue3 allows camelCase eslint.vuejs.org/rules/custom-event-name-casing.html
    – Leonard
    Sep 14 at 1:47
7

In addition to @ssc-hrep3's point on kebab-case

The docs for .sync recommend using the pattern update:myPropName

1

For custom events, the safest option is to just use a lower-cased event name all smashed together. Currently even kebab-case can have issues.

this.$emit('mycustomevent', this.data);

then, in the parent component, feel free to bind to a camel-cased function

<parent-component v-on:mycustomevent="doSomething"></parent-component>

it's a bit janky, but it works.

Source (states that kebab-case doesn't work either)

2
-6

Vue.js transforms not only xml tags (component names) but attributes as well, so when you are generating event

$emit('iLikeThis')

you must handle it as:

v-on:i-like-this="doSomething"

From docs:

When registering components (or props), you can use kebab-case, camelCase, or TitleCase. ...

Within HTML templates though, you have to use the kebab-case equivalents:

5
  • 2
    Not working. Vue doesn't transform camelCase to kebab... But if I emit event in kebab style and listen it also in kebab style it works.
    – xAoc
    Feb 27, 2017 at 13:42
  • same here.. this doesn't seem to work for events (anymore). Using v2.4.2 Nov 5, 2017 at 10:33
  • It's not a wiki, but an answer to the question, which is valid and correct. Use documentation for ...documentation of the newer feature @ssc-hrep3.
    – euvl
    Aug 6, 2018 at 12:53
  • Here's a link to documentation that explicitly says that the above won't work: vuejs.org/v2/guide/components-custom-events.html#Event-Names
    – rustyx
    Aug 19, 2020 at 17:14
  • This is not true for custom event naming Apr 22, 2021 at 11:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.