Closed
Description
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?
Metadata
Metadata
Assignees
Labels
No labels