Changed a recommendation for custom events name casing (#754)

* fix: fixed custom event casing in guide

* Update src/guide/component-custom-events.md

Co-authored-by: skirtle <65301168+skirtles-code@users.noreply.github.com>

Co-authored-by: skirtle <65301168+skirtles-code@users.noreply.github.com>

Author: NataliaTepluhina

src/guide/component-basics.md

@@ -178,7 +178,11 @@ Which can be used in the template to control the font size of all blog posts:
 ```html
 <div id="blog-posts-events-demo">
   <div :style="{ fontSize: postFontSize + 'em' }">
-    <blog-post v-for="post in posts" :key="post.id" :title="post.title"></blog-post>
+    <blog-post
+      v-for="post in posts"
+      :key="post.id"
+      :title="post.title"
+    ></blog-post>
   </div>
 </div>
 ```
@@ -216,7 +220,7 @@ When we click on the button, we need to communicate to the parent that it should
 Then the child component can emit an event on itself by calling the built-in [**`$emit`** method](../api/instance-methods.html#emit), passing the name of the event:
 
 ```html
-<button @click="$emit('enlarge-text')">
+<button @click="$emit('enlargeText')">
   Enlarge text
 </button>
 ```
@@ -230,7 +234,7 @@ We can list emitted events in the component's `emits` option:
 ```js
 app.component('blog-post', {
   props: ['title'],
-  emits: ['enlarge-text']
+  emits: ['enlargeText']
 })
 ```
 
@@ -241,7 +245,7 @@ This will allow you to check all the events that a component emits and optionall
 It's sometimes useful to emit a specific value with an event. For example, we may want the `<blog-post>` component to be in charge of how much to enlarge the text by. In those cases, we can pass a second parameter to `$emit` to provide this value:
 
 ```html
-<button @click="$emit('enlarge-text', 0.1)">
+<button @click="$emit('enlargeText', 0.1)">
   Enlarge text
 </button>
 ```

src/guide/component-custom-events.md

@@ -4,32 +4,17 @@
 
 ## 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.
-
-```js
-this.$emit('my-event')
-```
-
-```html
-<my-component @my-event="doSomething"></my-component>
-```
-
-If we're emitting a camelCased event name:
+Like components and props, event names provide an automatic case transformation. If you emit an event from the child component in camel case, you will be able to add a kebab-cased listener in the parent:
 
 ```js
 this.$emit('myEvent')
 ```
 
-Listening to the kebab-cased version will have no effect:
-
 ```html
-<!-- Won't work -->
 <my-component @my-event="doSomething"></my-component>
 ```
 
-Since event names will never be used as variable or property names in JavaScript, there is 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 `@myEvent` would become `@myevent` -- making `myEvent` impossible to listen to.
-
-For these reasons, we recommend you **always use kebab-case for event names**.
+As with [props casing](/guide/component-props.html#prop-casing-camelcase-vs-kebab-case), we recommend using kebab-cased event listeners when you are using in-DOM templates. If you're using string templates, this limitation does not apply.
 
 ## Defining Custom Events
 
@@ -39,7 +24,7 @@ Emitted events can be defined on the component via the `emits` option.
 
 ```js
 app.component('custom-form', {
-  emits: ['in-focus', 'submit']
+  emits: ['inFocus', 'submit']
 })
 ```