Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

camelCase events can be listened to in the kebab-case #656

Closed
ota-meshi opened this issue Oct 29, 2020 · 4 comments · Fixed by #754
Closed

camelCase events can be listened to in the kebab-case #656

ota-meshi opened this issue Oct 29, 2020 · 4 comments · Fixed by #754

Comments

@ota-meshi
Copy link
Member

ota-meshi commented Oct 29, 2020 •
edited
Loading

The documentation says it Won't work but it seems to work.

https://v3.vuejs.org/guide/component-custom-events.html#event-names

I checked in the following source code.

<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/vue@3.0.2"></script>
  </head>
  <body>
    <div id="counter">
      {{ count }}
      <my-component @my-event="doSomething"></my-component>
    </div>
    <script>
      const App = {
        data() {
          return { count: 0 };
        },
        methods: {
          doSomething() {
            this.count++;
          },
        },
      };

      const app = Vue.createApp(App);

      app.component("MyComponent", {
        template: `<button @click="onClick">+1</button>`,
        emits: ["myEvent"],
        methods: {
          onClick() {
            this.$emit("myEvent");
          },
        },
      });

      app.mount("#counter");
    </script>
  </body>
</html>

Also, if I use a compiled component, I will get a warning if I define the emits option in the kebab-case.
vuejs/eslint-plugin-vue#1347
The recommended casing for the event name is the kebab-case, but should we actually recommend the camelCase?
@NataliaTepluhina
Copy link
Member

@ota-meshi I think with emits introduction this sentence in docs is not true anymore: Since event names will never be used as variable or property names in JavaScript, there is no reason to use camelCase or PascalCase

So maybe as we started to use event name as a property name in emits it's a good idea to change our style guide recommendation to use camelCase in event names.

@NataliaTepluhina NataliaTepluhina mentioned this issue Nov 1, 2020
Closed
@skirtles-code
Copy link
Contributor

There's a related bug for using kebab-case with emits: vuejs/core#2540

I haven't seen anything official but it would seem that the intention is for event names to treat kebab-case and camelCase as equivalent in Vue 3, a bit like props. Assuming that is the case, it would make sense to me for the style guide recommendation to be similar to the recommendation for props.

The introduction to the page on custom events is definitely going to need a rewrite once the correct behaviour is established.

@NataliaTepluhina
Copy link
Member

NataliaTepluhina commented Dec 1, 2020 •
edited
Loading

We've discussed this at the core team meeting and the plan is to change the recommended casing to the way we have for props:

  • on the child component, we emit the event and declare it in the emits option in the camelCase;
  • on the parent component, we listen to events in kebab-case (so in-DOM templates work fine).

On 3.0.3 the mentioned bug persists, to be fixed in 3.0.4

@ota-meshi
Copy link
Member Author

Thank you for discussing this issue! I think it makes sense.

@ota-meshi ota-meshi mentioned this issue Dec 3, 2020
Closed
@NataliaTepluhina NataliaTepluhina mentioned this issue Dec 18, 2020
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Changed a recommendation for custom events name casing vuejs/docs
3 participants
@ota-meshi @NataliaTepluhina @skirtles-code