defineComponent's emits type error when use '-' in event name
Vue version
3.3.4
Link to minimal reproduction
https://github.com/tangtangtangtangtang/vite-test
Steps to reproduce
In TypeScript Type DefineComponent process the emits & props with ResolveProps;
Inside this ResolveProps it process the emit with type EmitsToProps;
EmitsToProps add a prefix 'on' and Capitalize, the result will be
onGo-task
, so the component props need aonGo-task
props;when use this component <HelloWorld @go-task="goTask" />, it will change the props to camel case which is onGoTask;
in vue 2.7, defineComponent did not process the emits into props; so it makes the props type error
What is expected?
should we not use - in emits?
What is actually happening?
type error when defineEmits use -
System Info
No response
Any additional comments?
No response
"vue/attribute-hyphenation": "off",
"vue/v-on-event-hyphenation": "off",
const props = defineProps<{
myTask?: Task[];
}>();
const emit = defineEmits<{
(evt: 'goTask'): void;
}>();
<script lang="ts" setup>
import { VxTaskList } from 'vue-components';
import { WxTaskList } from 'web-components';
import { MdFilledTextField } from '@material/web/textfield/filled-text-field';
import TaskList from './TaskList.vue';
const goTask = () => {};
</script>
<template>
<!-- This is how I use Vue components -->
<TaskList :myTask="[]" @goTask="goTask" />
<VxTaskList :myTask="[]" @goTask="goTask" />
<!-- This is how I use Web Components -->
<wx-task-list :my-task="[]" @go-task="goTask"></wx-task-list>
<md-filled-text-field label="Mx" :value="''" @input="inputTextfield"></md-filled-text-field>
</template>
vue({
template: {
compilerOptions: {
isCustomElement: (tag) => tag.includes('-'),
},
},
}),
"vue/attribute-hyphenation": "off", "vue/v-on-event-hyphenation": "off",
const props = defineProps<{ myTask?: Task[]; }>(); const emit = defineEmits<{ (evt: 'goTask'): void; }>();
<script lang="ts" setup> import { VxTaskList } from 'vue-components'; import { WxTaskList } from 'web-components'; import { MdFilledTextField } from '@material/web/textfield/filled-text-field'; import TaskList from './TaskList.vue'; const goTask = () => {}; </script> <template> <!-- This is how I use Vue components --> <TaskList :myTask="[]" @goTask="goTask" /> <VxTaskList :myTask="[]" @goTask="goTask" /> <!-- This is how I use Web Components --> <wx-task-list :my-task="[]" @go-task="goTask"></wx-task-list> <md-filled-text-field label="Mx" :value="''" @input="inputTextfield"></md-filled-text-field> </template>
vue({ template: { compilerOptions: { isCustomElement: (tag) => tag.includes('-'), }, }, }),
so it's not recommend to use hyphenation event in vue components? By the way, where should I put this configuration("vue/v-on-event-hyphenation": "off"), seems it's not in the https://vuejs.org/